Question

我有一个带[dataSource] =“ data”标签的物料表。我想在单击的特定行中更改图标的可见性。

因此，微调框现在处于隐藏状态，并且删除/编辑图标显示在每一行上。当我单击特定行中的删除/编辑图标时，我想显示微调器并隐藏该删除图标。

实际上我有一个对话框，当我单击“删除/编辑”图标时出现。如果我确认删除/编辑并关闭对话框，我希望在服务运行时看到微调框。

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef>Actions</th>
      <td mat-cell *matCellDef="let element">
        <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary" (click)="openDialog('Update',element)">
          <mat-icon aria-label="Edit">edit</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn" (click)="openDialog('Delete',element)">
          <mat-icon>
            <mat-spinner diameter="20" color="warn"></mat-spinner>
          </mat-icon>
          <mat-icon aria-label="Delete">delete</mat-icon>
        </button>
      </td>
    </ng-container>

Answer 1

您将需要在组件中使用一个变量来告诉您的html，何时加载该HTML，并将其更改为true，然后再调用服务，并在从该服务获得响应时将其关闭，例如：

loading = false;

onEdit(){
  this.loading = true;
  this.service.init().subscribe(result=>{
     this.loading = false;
  });
}

现在只需在加载设置为true时隐藏“删除”按钮即可：

<ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef>Actions</th>
      <td mat-cell *matCellDef="let element">
        <button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary" (click)="openDialog('Update',element)">
          <mat-icon aria-label="Edit">edit</mat-icon>
        </button>
        <button *ngIf="!loading else isLoading" mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn" (click)="openDialog('Delete',element)">
          <mat-icon>
            <mat-spinner diameter="20" color="warn"></mat-spinner>
          </mat-icon>
          <mat-icon aria-label="Delete">delete</mat-icon>
        </button>
        <ng-template #isLoading>
          <mat-spinner></mat-spinner>
        </ng-template>
      </td>
    </ng-container>

这只是基本的实现，您现在可以根据自己的喜好对其进行改进，也可以为两个图标单独添加多个变量。

更改特定物料表行中的物料图标状态

1 个答案: