UPD новый метод editCustomer
editCustomer(editCustomer: Customer) {
this.router.navigate(['edit-customer'], { state: {id: editCustomer.id, name: editCustomer.name,
address: editCustomer.address, phones: editCustomer.phones } });
}
export class EditCustomerComponent implements OnInit {
editCustomerForm: FormGroup;
constructor(private formBuilder: FormBuilder, private customersClient: CustomersClient,
private router: Router, private activatedRoute: ActivatedRoute) {
this.editCustomerForm = this.formBuilder.group({
name: [this.activatedRoute.snapshot.paramMap.get('name'), Validators.required],
address: [this.activatedRoute.snapshot.paramMap.get('address'), Validators.required],
phones: [this.activatedRoute.snapshot.paramMap.get('phones'), Validators.required]
});
}
// остальной код
}
Необходимо передать объект в компонент, для выполнения его изменения. Хочу, чтобы объект из таблицы передавался в компонент, который отвечает за его редактирование.
Пока что сделал вот так:
TS компонента, в который надо передать (переменная customer в ctor)
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CustomersClient, Customer } from 'src/app/api-service.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-edit-customer',
templateUrl: './edit-customer.component.html',
styleUrls: ['./edit-customer.component.scss']
})
export class EditCustomerComponent implements OnInit {
editCustomerForm: FormGroup;
constructor(private formBuilder: FormBuilder, private customersClient: CustomersClient, private customer: Customer,
private router: Router) {
this.editCustomerForm = this.formBuilder.group({
name: [customer.name, Validators.required],
address: [customer.address, Validators.required],
phones: [customer.phones, Validators.required]
});
}
ngOnInit() {
}
editCustomer() {
this.customersClient.putCustomer(this.customer.id, this.editCustomerForm.value).subscribe(data => {
console.log('yspex');
});
}
toCustomerList() {
this.router.navigate(['list-customer']);
}
}
То, как выглядит откуда хочу передавать
import { element } from 'protractor';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { CustomersClient, Customer } from 'src/app/api-service.service';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { Router } from '@angular/router';
@Component({
selector: 'app-list-customer',
templateUrl: './list-customer.component.html',
styleUrls: ['./list-customer.component.scss']
})
export class ListCustomerComponent implements AfterViewInit, OnInit {
customers = new MatTableDataSource<Customer>();
displayedColumns: string[] = ['id', 'name', 'address', 'phones', 'actions'];
paginator: MatPaginator;
sort: MatSort;
constructor(private customersClient: CustomersClient, private router: Router) { }
// ... другой код
editCustomer(customer: Customer) {
this.router.navigate(['edit-customer']);
}
}
Собственно, как это выглядит в UI.
Задумка такая - в зависимости от того, на каком объекте пользователь нажал "Редактировать" тот объект передается в компонент, без нового запроса в БД
paramMap
это сериализированные параметры URL, а не состояние.