行上的 Mat-table 事件已添加

Question

我想在 mat-table 中添加新行时执行一项操作，但我无法知道它何时发生。有没有发射器或其他方式？我已经阅读了所有 mat-table doc 并在 Internet 上搜索，但我没有找到任何东西。

我想要这个：

<tr mat-row *matRowDef="let row; columns: columns;" onAdd=(function())>

为了更新我刚刚输入的数据源： this.datasource.data = newData

Answer 1

您可以执行以下操作吗（我使用了代码“CaseDetailModel”中的现有模型，因为您没有提供有关您的数据类型的任何信息）：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CaseDetailModel } from '../../models/casedetailmodel';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-stackoverflow',
  templateUrl: './stackoverflow.component.html',
  styleUrls: ['./stackoverflow.component.scss']
})

export class StackoverflowComponent implements OnInit {

  private currentCaseDetails: CaseDetailModel[] = [];
  private newCaseDetails: CaseDetailModel[] = [];

  public dataSource: MatTableDataSource<CaseDetailModel>;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<CaseDetailModel[]>('/some/data/').subscribe((caseDetails: CaseDetailModel[]) => {

      //This if statement will stop the initial list items all being classed as new - you may want to remove it
      if (this.currentCaseDetails.length) {
        //Get any items that do not currently exist in the table
        this.newCaseDetails = caseDetails.filter(cd => {
          return !this.currentCaseDetails.some(ccd => ccd.caseId === cd.caseId);
        });
      }

      this.newCaseDetails.forEach(ncd => {
        //Do something with each new item
      });

      this.currentCaseDetails = caseDetails;

      this.dataSource = new MatTableDataSource(caseDetails);
    });
  }
}