加载角度材料时在特定表格行上显示微调器答案

【问题标题】：Show spinner on specific table row when loading angular material加载角度材料时在特定表格行上显示微调器
【发布时间】：2021-07-28 01:38:49
【问题描述】：

我有一个这样的材料表行：

<ng-container  matColumnDef="delete">

  <mat-header-cell *matHeaderCellDef>Delete</mat-header-cell>
  <mat-cell *matCellDef="let data">
    <mat-spinner *ngIf="isDeleting" [diameter]="25" ></mat-spinner>
    <button *ngIf="!isDeleting" mat-raised-button (click)="deleteRecord(data.id)">Delete</button>
  </mat-cell>
</ng-container>

I want to make it so that when the button in the row is selected, the button goes away and the spinner shows up until the loading is completed.上面的代码使所有的按钮行消失并显示加载，我只想要被点击的行按钮。

【问题讨论】：

你有没有想过这个问题？尝试自己做类似的事情并遇到了这个
@Josh 没什么超级干净的，但您可以根据行的索引显示微调器。因此，如果选择了索引 5 行，则将 selectedButton = 5 保存在某处并在每个按钮上添加一个条件，检查按钮索引是否与保存的索引匹配，然后显示微调器。
这是个好主意。我将看看是否可以向表正在迭代的对象添加一个道具，例如loading 或其他东西，并通过在单击时和整个代码中设置值来管理它。如果我不能解决这个问题，你的会很好。感谢您对一个相对较老的问题的快速响应！

标签： angular-material

【解决方案1】：

只需实现此功能即可工作。所以对于那些偶然发现这个的人......

仅针对选定按钮的行：更新您的数据源，为每个名为 isDeleting 的项目添加另一个元素，默认情况下等于 false。

单击删除按钮后，从 matCellDef 传递数据对象并设置 data.isDeleting = true。

删除过程完成后，data.isDeleting = false。

我还建议创建一个变量，例如 this.selectedRecord，并在单击按钮时将其设置为等于 data，因此在删除过程中可以在您的代码中轻松访问它。

最终，利用this.selectedRecord.isDeleting = true/false。

显示删除按钮：*ngIf="!this.selectedRecord.isDeleting"。

显示进度微调器：*ngIf="this.selectedRecord.isDeleting"。

记得在删除完成后将布尔值更新为 false。

【讨论】：