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

2024-05-19 • 问答

我只需要在启动状态时显示“取消”按钮，但是在更改状态时，它应该被禁用或完全消失。

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

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

例如：

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

我认为最简单的方法是通过* ngIf指令：

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

在这种情况下，仅当变量状态的字符串值为'Initiated'时，按钮才会出现

尝试这样：

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

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

pandadizi 回答：如何在角度表中显示特定名称上的按钮

大家都在问