angular - 如何在角度表中的特定名称上显示按钮

Question

我只需要在状态为 Initiated 时显示 Cancel 按钮，但在 Changed 时它应该被禁用或完全消失。

` {{ '收件人' | 翻译 }} {{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>

`

标签： angularbutton

Answer 1

您可以在检查状态值的容器上使用*ngIf 。

例如：

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