Angular 角度材质表刷新数据一次，然后停止刷新数据

我有一个奇怪的场景，我正在显示一个包含客户名字和姓氏的有角度的材质表。有一个“添加客户按钮”，弹出一个模式，在其中添加一个新客户。单击“提交”时，它会将客户添加到客户数组中，并更新表。然而，这只会在您第一次这样做时发生。随后的尝试毫无作用。客户阵列不断更新，但数据源从数据服务绑定到的可观察对象似乎与它分离，并保持相同的阵列（它仅在第一次更新）。不确定我在这里做错了什么，因为这是我第一次进入Angular 7。任何帮助都将不胜感激，这已经让我疯狂了大约一个小时了

数据服务

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() {}
}

iccustomer.ts//客户界面

export interface Customers {
    firstName: string;
    lastName: string;
  }

客户数据表

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**
    });
    }
}

---

现在它可以按我的需要工作了……我想这是有意义的，因为它每次都创建一个新对象，而不是使用同一个对象。

另一个选项是在表中输入一个变量（使用ViewChild）并使用table.renderRows（），请参见

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();
  }
}

this.customers = [...this.customers];