Как показать кнопку на конкретное имя в угловой таблице

Question

Мне нужно показывать кнопку «Отмена» только тогда, когда статус «Инициирован», но при изменении он должен быть отключен или полностью исчез.

`{{'Получатель' |перевод}} {{row.recipient.name}}

<!-- status.name Column -->
<ng-container matColumnDef="status.name">
  <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'Status' | translate }}</mat-header-cell>
  <mat-cell *matCellDef="let row" aria-label="status" data-label="status.name">
    {{row.status.name}}
  </mat-cell>
</ng-container>....


<!-- cancle Transaction Column -->
<ng-container matColumnDef="cancel" >
  <mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="'widthCancel'">{{ 'Cancel Transaction' | translate }}</mat-header-cell>
  <mat-cell *matCellDef="let row" aria-label="cancel" data-label="transaction" [ngClass]="'widthCancel'">
      <button mat-button color="warn" class="cancel-transaction" matTooltip="Cancel initiated transaction"  (click)="onCancelTransaction()">{{ 'Cancel' | translate }}</button>
  </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>

`

Answer 1

Я думаю, что самый простой способ сделать это через директиву * ngIf:

<button mat-button *ngIf="status === 'Initiated'" color="warn" class="cancel-transaction" matTooltip="Cancel initiated transaction"  (click)="onCancelTransaction()">{{ 'Cancel' | translate }}</button>

В этом случае кнопка появится только тогда, когда переменная status будет иметь строковое значение 'Initiated'

Answer 2

Попробуй так:

<button mat-button  [disabled]="status != 'Initiated'" color="warn" class="cancel-transaction" matTooltip="Cancel initiated transaction"  (click)="onCancelTransaction()">
  {{ 'Cancel' | translate }}
</button>

Answer 3

Вы можете использовать * ngIf для контейнера, который проверяет значение состояния.

например:

<ng-container *ngIf="status ==== 'Initiated'" matColumnDef="cancel" >