Angular

Question

我有一个 table，它从 MatTableDataSource 获取数据。数据源包含一个过滤器，可用于仅显示 table 中具有特定属性设置为 true 或 false 的元素。这就是我在 ngOnInit() 函数中将过滤器添加到数据源的方式：

this.dataSource.filterPredicate = function (record, filter) {
  return record.disabled === ConverterService.toBoolean(filter);
};

this.dataSource.filter = "false";

在 table 中，每个元素都有一个按钮，单击该按钮可以打开编辑对话框，以便用户可以更改任何元素属性。关闭对话框后，我使用 table 索引用编辑对话框返回的新元素覆盖旧元素。打开对话框并更新 table 数据的函数如下所示：

  editProjectDialog(projectId: number, index: number, $event: MouseEvent) {
    $event.stopPropagation();
    const dialogRef = this.dialog.open(EditProjectDialogComponent, {
      data: projectId,
    });
    dialogRef.afterClosed().subscribe((result) => {
      this.projects[index] = result;
      this.dataSource.data = this.projects;
    });
  }

函数是这样调用的：

 <ng-container matColumnDef="edit">
    <th mat-header-cell *matHeaderCellDef>Edit</th>
    <td mat-cell *matCellDef="let element; let index = index">
      <button
        mat-icon-button
        (click)="editProjectDialog(element.id, index, $event)"
        matTooltip="Edit"
      >
        <mat-icon>edit</mat-icon>
      </button>
    </td>
  </ng-container>

这段代码过去在没有向数据源添加过滤器时工作得很好，但现在它不再工作了，因为 table 中的索引与 [=20= 中的索引不匹配] 数组（因为 projects 数组包含所有元素，索引仅针对显示在 table 中的筛选元素）。我还尝试通过将 this.projects[index] 替换为 this.dataSource.data[index] 甚至 this.dataSource.filteredData[index] 来直接修改元素，但是 none 似乎有效。如何更新数据源中已编辑的元素以将更改应用到 table?

Answer 1

您可能可以使用其他方法获得正确的索引。如何在 projects 数组中查找元素，如下所示：

const rightIndex = this.projects.findIndex(item => item.id === result.id);
this.projects[rightIndex] = result;
this.dataSource.data = this.projects;

找到正确的索引后，就可以继续替换元素了。您可能需要在将项目数组分配为 dataSource.data 时解构它，如下所示：this.dataSource.data = [...this.projects];

Angular - 如何通过过滤后的 table 中的索引更新 table 元素？

Angular - How to update table element via its index in a filtered table?

typescript

angular12