根据条件禁用按钮

Question

我正在从服务器获取数据，我想过滤掉特定的列。我想要的是，如果一个列 bought(boolean) 说 true 我必须禁用旁边的编辑按钮，如果它是 false，则必须显示编辑

在此处输入代码

            <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提供的禁用指令。

<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

根据条件禁用按钮

Disable a button based on condition

html

html-table

angular

angular10