时间戳

首页 > 解决方案 > 如何根据条件更改角垫图标按钮颜色？

angular - 如何根据条件更改角垫图标按钮颜色？

问题描述

如何根据条件更改角度按钮颜色？，这是一个垫子图标按钮

＃代码

<div class="flex">
  <button mat-icon-button *ngFor="let action of actions" 
    [disabled]="isDisabled && action.name === 'For Approval'" matTooltip="{{action.name}}"
    (click)="clickActionBtn(action.name)">
    <mat-icon style="font-size: 20px;" class="{{action.class}}">
      {{action.icon}}
    </mat-icon>
  </button>

我试过了，但它不起作用

[class.gray]="isDisabled

标签： angular

解决方案

Angular Materialmat-icon将color作为输入（使用primary、accent和warn基于您的材质主题颜色的选项）来定义图标的颜色，因此您需要使用此输入来更改它，如下所示：

<!-- `color` input allowed options are: `primary`, `accent`, and `warn` only. -->
<mat-icon [color]="isDisabled && action.name === 'For Approval' ? 'primary' : ''"></mat-icon>

因此，您可以将按钮 HTML 更新为如下所示：

<button
  mat-icon-button
  *ngFor="let action of actions"
  [disabled]="isDisabled && action.name === 'For Approval'"
  matTooltip="{{action.name}}"
  (click)="clickActionBtn(action.name)"
>
  <mat-icon
    style="font-size: 20px"
    [color]="isDisabled && action.name === 'For Approval' ? 'primary' : ''"
  >
    {{action.icon}}
  </mat-icon>
</button>

推荐阅读