角材料数据表更新答案

【问题标题】：Angular material datatable updating角材料数据表更新
【发布时间】：2017-10-15 13:11:46
【问题描述】：

我从 Angular Material 实现了 Angular datatable。

我从我的 API 中读取数据并用它填充我的表，使用以下代码：

@ViewChild('filter') filter: ElementRef;

  dataSource: MyDataSource | null;
  dataSubject = new BehaviorSubject<any[]>([]);
  displayedColumns = ['name'];

    constructor(private appService: ApplicationsService) {
    this.appService.getAllApps().subscribe({
      next: value => this.dataSubject.next(value)
    });
  }

  ngOnInit() {
    this.dataSource = new MyDataSource(this.dataSubject);
  }

export class MyDataSource extends DataSource<any[]> {

  constructor(private subject: BehaviorSubject<any[]>) {
    super ();
  }

  connect (): Observable<any[]> {
    return this.subject.asObservable();
  }

  disconnect (  ): void {

  }

}

还有我的模板：

<md-table #table [dataSource]="dataSource">

          <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->

          <!-- name Column -->
          <ng-container mdColumnDef="name">
            <md-header-cell *mdHeaderCellDef> Name </md-header-cell>
            <md-cell *mdCellDef="let row" (click)="viewApp(row)"> {{row.name}} </md-cell>
          </ng-container>

          <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
          <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
        </md-table>

当用户以这种方式单击按钮时，我正在尝试更新表格：

buttonClick() {

    this.appService.geAnotherApps()
                .subscribe({
                next: value => this.dataSubject.next(value)
              });
}

但表格没有更新。

为什么表没有更新？
如何根据输入过滤表？

【问题讨论】：

您的第二个问题已在您在问题中引用的页面中解决。

标签： angular rxjs angular-material

【解决方案1】：

一种解决方案是在 HTML 中定义一个 Action-Column，如下所示：

<ng-container matColumnDef="actions">
        <mat-cell *matCellDef="let model">
          <button mat-icon-button matTooltip="Edit" (click)="edit(model)">
            <mat-icon>edit</mat-icon>
          </button>
        </mat-cell>
</ng-container>

如果您在应用版本后传递完整的元素进行编辑，您可以看到自动刷新表格。

在 .ts 中你会有这样的东西：

private edit(element?: Model) {
    // In this case i use Mat-Dialog from edition
    let dialogRef = this.dialog.open(EditDialogComponent,
  {
    panelClass: 'mat-dialog-lg',
    data: { element: element }
  });
dialogRef.afterClosed().subscribe(response => {
  if (response) {
    // For change the data in the table list you have to assign the response to your element
    element = response;
  }
});

}

请记住，元素和响应必须属于同一类型

【讨论】：