У меня возникает странный сценарий, когда я показываю угловую таблицу материалов с именами и фамилиями клиентов. Существует кнопка «Добавить клиента», которая открывает модальное окно для добавления нового клиента. Когда вы нажимаете «Отправить», клиент добавляется в массив клиентов, и таблица обновляется. Однако это происходит только в первый раз, когда вы это делаете. Последующие попытки ничего не дают. Массив клиентов продолжает обновляться, но Observable, к которому привязан источник данных из службы данных, кажется, отсоединяется от него и сохраняет тот же массив (он обновляется только в первый раз). Не уверен, что я делаю неправильно, так как это мой первый набег на Angular 7. Любая помощь будет очень признательна, это сводит меня с ума уже около часа.
данные-service.ts
import { Injectable } from '@angular/core';
import { Observable} from 'rxjs';
import {Customers} from './ICustomer';
@Injectable({
providedIn: 'root'
})
export class DataServiceService {
customers: Customers[] = [
{
firstName: 'Matt',
lastName: 'Osman'
},
{firstName: 'Josh',
lastName: 'Allen'}
];
// get customers from the customer array
public getCustomers(): any {
const customersObservable = new Observable(observer => {
setTimeout(() => {
observer.next(this.customers);
}, 1000);
});
return customersObservable;
}
// add customers to the customer array
public addCustomers(data: any): any {
this.customers.push(data);
this.customers = [...this.customers];
}
constructor() {}
}
ICustomer.ts //пользовательский интерфейс
export interface Customers {
firstName: string;
lastName: string;
}
клиент-данные-table.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatTable} from '@angular/material';
import {DataServiceService} from '../data-service.service';
import {Customers} from '../ICustomer';
import {MatDialog} from '@angular/material/dialog';
import { AddCustomerModalComponent } from '../add-customer-modal/add-customer-modal.component';
@Component({
selector: 'app-customer-data-table',
templateUrl: './customer-data-table.component.html',
styleUrls: ['./customer-data-table.component.css']
})
export class CustomerDataTableComponent implements OnInit {
displayedColumns: string[] = ['firstName', 'lastName'];
dataSource: Customers[] = [];
firstName: string;
lastName: string;
// needed to update the data in the table after adding
@ViewChild(MatTable, {static: false}) table: MatTable<any>;
constructor(private customerService: DataServiceService, public dialog: MatDialog) { }
numEmployees() {
return this.dataSource.length;
}
// this handles the dialog open/close events
openDialog(): void {
const dialogRef = this.dialog.open(AddCustomerModalComponent, {
width: '75%',
data: {firstName: this.firstName, lastName: this.lastName}
});
dialogRef.afterClosed().subscribe(result => {
console.log('the dialog was closed');
this.customerService.addCustomers(result); **<-- the customers[] continues updating but NOT the datasource observing it**
this.table.renderRows();
});
}
// subscribe to the dataService to connect to the customer list.
ngOnInit() {
const customersObservable = this.customerService.getCustomers();
customersObservable.subscribe((customersData: Customers[]) => {
this.dataSource = customersData; **<--- THIS UPDATES ONLY THE FIRST TIME THEN STOPS UPDATING WHEN NEW CUSTOMERS ARE ADDED**
});
}
}
добавить-клиент-modal.ts
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Component, Inject } from '@angular/core';
import {Customers} from '../ICustomer';
@Component({
selector: 'app-add-customer-modal',
templateUrl: './add-customer-modal.component.html',
styleUrls: ['./add-customer-modal.component.css']
})
export class AddCustomerModalComponent {
constructor( public dialogRef: MatDialogRef<AddCustomerModalComponent>,
@Inject(MAT_DIALOG_DATA) public data: Customers) { }
onCancel(): void {
this.dialogRef.close();
}
}
ОБНОВИТЬ:
Проблема решается одним простым изменением...
В методе addCustomers в data-service.services.ts я закомментировал следующую строку:
this.customers = [...this.customers];
и теперь он работает так, как мне нужно... Я думаю, это имеет смысл, поскольку каждый раз он создает новый объект вместо использования одного и того же объекта.