Angular 2 Material | Datatables - 动态刷新 table 数据并获取所选行的索引

Question

我在我的一个项目中使用 Angular 2 material 数据table。我的问题实际上有两个部分：

如果我单击数据中的任何一行table，我需要获取行索引，以便我可以对所选行应用适当的 CSS排。我已经阅读了文档，但找不到任何关于获取每一行索引的提及。
我还允许用户编辑数据中的个人记录table。为此，每一行都有一个编辑按钮，单击该按钮将打开一个预填充了值的模式对话框。数据更新后，我想用新值更新数据table。我可以在包含 table 的 window 中访问更新的数据模型。我想了解如何动态更新行或在数据中插入新行table（最佳实践）。

如果有任何意见，我们将不胜感激。

Answer 1

正如@Nehal 提到的，您可以这样做以获得 row.id

html:

<md-row *cdkRowDef="let row; columns: displayedColumns; let index=index;"
  (click)="select(row, index)">
</md-row>

ts:

select(row, index) {
  // you can use a row id or just a table index
  this.selectedRowIndex = row.id;
}

如果您 connect() observable 发出新值，数据表将重新呈现。该解决方案将特定于您的应用程序，但您需要做的就是更新您的数据模型，然后再次发出您的数据模型。

Answer 2

问题 #2 确实没有答案，所以这是一个使用我的删除代码的解决方案，但更新代码也是如此。请注意，一旦结果成功，我将调用一个成功模式来通知用户，然后调用一个函数从数据 table 中删除该行。这样我就不用重新下载所有数据了。

public deleteMember(memberId) {
      // Call the confirm dialog component
      this.confirmService.confirm('Confirm Delete', 'This action is final. Gone forever!')
          .switchMap(res => {if (res === true) {
              return this.appService.deleteItem(this.dbTable, memberId);
          }})
          .subscribe(
              result => {
                this.success();
                // Refresh DataTable to remove row.
                this.updateDataTable (memberId);
              },
              (err: HttpErrorResponse) => {
                  console.log(err.error);
                  console.log(err.message);
                this.messagesService.openDialog('Error', 'Delete did not happen.');
              }
          );
  }

现在让我们删除或更新已删除或编辑的行。

  // Remove the deleted row from the data table. Need to remove from the downloaded data first.
  private updateDataTable (itemId) {
    this.dsData = this.dataSource.data;
    if (this.dsData.length > 0) {
      for (let i = 0; i < this.dsData.length; i++ ) {
        if (this.dsData[i].member_id === itemId) {
          this.dataSource.data.splice(i, 1);
        }
      }
    }
    this.dataSource.paginator = this.paginator;
  }

Answer 3

动态更改 MatTableDataSource 中的元素后

elements.forEach(ele => { this.dataSource.data.push(ele) });

你可以用

强制你的table重绘

this.dataSource._updateChangeSubscription();

Angular 2 Material | Datatables - 动态刷新 table 数据并获取所选行的索引

Angular 2 Material | Datatables - Refresh table data dynamically and getting the index of selected row

angular-material2

angular