根据条件禁用按钮

Posted 2023-03-05

【中文标题】根据条件禁用按钮

【英文标题】：Disable a button based on condition

【发布时间】：2021-01-06 00:46:52

【问题描述】：

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

在此处输入代码

            <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>`

【参考方案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>

【讨论】：

它可以工作，但我希望按钮在启用时进行鼠标悬停，而在禁用时不悬停

您想根据条件切换按钮上的悬停属性吗？之后你想做什么？

是的，我只是希望能够在启用时悬停，反之亦然。禁用的按钮无法悬停

【参考方案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

【讨论】：

它可以工作，但我希望按钮在启用时进行鼠标悬停，而在禁用时不悬停