单击角度按钮后如何更改按钮的颜色

Question

点击按钮后，我需要将按钮颜色更改为红色（从原色变为红色），请帮助我如何在点击按钮后更改颜色。

 <td>
      <button mat-icon-button color="primary">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

Answer 1

在您的代码中实现此逻辑。

var isClicked = false;

.myClass{
  color : red;
}

<td>
      <button mat-icon-button color="primary" (click)="isClicked = !isClicked" [class.myClass]="isClicked">
        <mat-icon>remove_circle</mat-icon>
      </button>
      </td>

Answer 2

尝试这种方式

// .ts file  
flag : any = false;

btnClick(){
    this.flag = true;
}

为颜色设置css

::ng-deep .colorRed{
    color:red
}

在您的HTML文件中

  // To apply color on row just put ngClass on tr  
  <tr [ngClass]="{ 'colorRed' :flag }">
    <td>
      <button mat-icon-button color="primary" (click)="btnClick()">
          <mat-icon>remove_circle</mat-icon>
       </button>
     </td>
  </tr>

Answer 3

由于您使用的是@ angular / material，因此应绑定到其组件的颜色@Input，而不是仅添加自己的CSS类。

那样，您不必担心css优先级，并且代码不会因组件颜色的@ angular / material实现更改而变得脆弱。

find_element(s)_by_xpath("")

以及您的组件中

  <button mat-icon-button 
          [color]="buttonColor"
          (click)="buttonColor = 'warn'">
    <mat-icon>remove_circle</mat-icon>
  </button>

如果警告颜色不是红色，请考虑更改主题或making a new theme。