根据条件禁用按钮

Question

我正在从服务器获取数据，我想过滤掉特定的列。我想要的是，如果购买的列（布尔值）为真，我必须禁用编辑按钮，如果它为假，则必须显示编辑

在此处输入代码

            <div *ngIf="isbaker">
    <div class="table-responsive">
        <table class="table">
            <thead class="table_header">
                <tr>
                    
                    <th>Customer</th>
                    <th>Name</th>
                    <th>Bought</th>
     
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let baker of shop;">            
                    <td>{{  baker.customer }}</td>
                    <td>{{ baker.name}}</td>
                    <td>{{  baker.bought}}</td>
               
                    

                    <td  *ngIf="isButton">
                        <button mat-icon-button matTooltip=" Edit" class="iconbutton" (click)="isbakerEdit(baker)"
                            color="primary">
                            <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
                        </button>
                    </td>  
                </tr>
            </tbody> 
        </table>`

Answer 1

您可以使用 Angular 提供的 disabled 指令。

<td  *ngIf="isButton">
   <button mat-icon-button matTooltip=" Edit" class="iconbutton"(click)="isbakerEdit(baker)" 
       color="primary" [disabled]="baker.bought == true">
       <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
   </button>
</td>

Answer 2

   <button mat-icon-button matTooltip=" Edit" class="iconbutton"(click)="isbakerEdit(baker)" 
       color="primary" [disabled]="baker?.bought">
       <mat-icon style="color: gray;" aria-label="Edit">edit</mat-icon>
   </button>

你所要做的就是打电话给[disabled]="baker?.bought