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

Question

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

1. 如果我单击数据表中的任意一行，我需要获取行索引，以便我可以对所选行应用适当的 CSS。我已经阅读了文档，但找不到任何关于获取每行索引的提及。

2. 我还允许用户编辑数据表中的单个记录。为此，每一行都有一个 EDIT 按钮，单击该按钮将打开一个预填充了值的模式对话框。更新数据后，我想使用新值更新数据表。我可以在包含表的窗口中访问更新的数据模型。我想了解如何动态更新行或在数据表中插入新行(最佳实践(。

希望在这里提供任何意见。

Answer 1

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

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

Answer 2

动态更改 MatTableData Source 中的元素后

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

您可以强制使用以下命令重新绘制表格

this.dataSource._updateChangeSubscription();

Answer 3

问题#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;
}