Question

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

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

欢迎任何投入。

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确实没有回答，所以这里是我的删除代码的解决方案，但更新代码相同。请注意，一旦结果成功，我调用一个成功模式来通知用户然后调用一个函数来从数据表中删除该行。这样我就不必再次下载所有数据了。

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) });

您可以强制使用

重绘表格

this.dataSource._updateChangeSubscription();

角2材料|数据表 - 动态刷新表数据并获取所选行的索引

3 个答案: