2

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

数据服务.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;
  }

客户数据表.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**
    });
    }
}

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

更新：

一个简单的改变就解决了这个问题......

在 data-service.services.ts 的 addCustomers 方法中，我注释掉了以下行：

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

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

4

0 回答 0