Question

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

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

我要这样做，以便在选择该行中的按钮时，该按钮消失并且微调框出现，直到加载完成。上面的代码使所有按钮行消失并显示负载，我只想要被单击的行按钮。

Answer 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。

加载角形材料时，在特定的表格行上显示微调框

1 个答案: