来自另一个组件的 MatTableDataSource答案

【问题标题】：MatTableDataSource from another component来自另一个组件的 MatTableDataSource
【发布时间】：2021-03-30 05:22:43
【问题描述】：

我有两个组件，Order 和 OrderDetail。

在Order 我有一个MatTableDataSource，它是从服务中填充的。

订单组件

在构造函数之前

listData: MatTableDataSource<DocumentDetailModel>;
displayedColumns: string[]= [ 'row','itemCode', 'itemName', 'priceListCode', 'priceListName', 
'wareHouseCode', 'wareHouseName', 'quantity', 'unitValue', 'ivaPercentage', 'valueBeforeIVA', 
'totalValue', 'cost', 'stock', 'profitMargin', 'actions'];  
 @ViewChild(MatSort) sort: MatSort;
 @ViewChild(MatPaginator) paginator: MatPaginator;

事件按钮获取

this.service.getDocument(this.service.form.value.documentDate, this.service.form.value.documentType, this.service.form.value.documentNumber).subscribe((data: DataResponseDocumentModel) => {      
    if(data.code === 1) 
    { 
      this.service.form.patchValue(data.documentHeader);
      this.service.form.disable();          
      this.getDataTable(data.lstDocumentDetail);
    }
});

功能

getDataTable(lstDocumentDetail) {
  this.listData = new MatTableDataSource(lstDocumentDetail);
  this.listData.sort = this.sort;
  this.listData.paginator = this.paginator;
  this.listData.filterPredicate = (data, filter) => {
    return this.displayedColumns.some(ele => {
      return ele != 'actions' && data[ele].toLowerCase().indexOf(filter) != -1;
    });
  }
}

来自OrderDetailComponent，我想在关闭时填写MatTableDataSource，OrderDetail 是MatDialog。

Image MatTable

Image MatDialog

代码按钮关闭MatDialog - OrderDetailComponent

onClose(){
  this.service.formDetail.reset();
  this.service.initializeFormDetailGroup();
  this.dialogRef.close();
}

这个应用程序是 Angular 9.1.12

【问题讨论】：

嗨，您的代码到底有什么问题？我看到您在使用this.service.formDetail.reset(); 关闭对话框时尝试重置表单。这个调用的返回类型是什么？它是 void 还是 Observable？
你想要的是刷新订单表。据我所知，对话框引用总是返回到它的父级，并表示它已关闭。您所要做的就是获取此返回并调用您用于填充 mat-table 的相同函数。或者，实现一个外观模式，它可以为你重新加载东西。
是的，我希望每次关闭对话框时我的表格都会更新。

标签： angular typescript angular-material mat-table angular-cli-v9

【解决方案1】：

您是否尝试获取对话框关闭事件？

 openDialog(): void {
    const dialogRef = this.dialog.open(OrderDialogComponent, {
      width: '250px',
      data: .....
    });

    dialogRef.afterClosed().subscribe(result => {
          Call Your reload Mat table function....        
    });
  }

【讨论】：

但关闭事件是由与我的表不同的组件完成的。
不，关闭事件发生在调用者组件上。如果我理解，您的表会调用该对话框。当对话框关闭时，它将响应 afterClosed() 订阅。