Изменить статус мат-иконки в определенной строке таблицы материалов

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 при загрузке и изменить ее на 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>

Это просто базовая реализация, теперь вы можете улучшить ее по своему вкусу или добавить несколько переменных для обеих иконок по отдельности.