Angular Material - 如何在运行时更改按钮颜色答案

【问题标题】：Angular Material - How to change button color in run timeAngular Material - 如何在运行时更改按钮颜色
【发布时间】：2019-06-04 16:23:48
【问题描述】：

我正在使用 Angular 材质制作侧边栏菜单。我没有找到根据某些组件属性更改按钮颜色的方法。

我已经阅读了文档：https://material.angular.io/components/button/overview

关于主题，它只说：

Buttons can be colored in terms of the current theme using the color property to set the background color to primary, accent, or warn.

这是我的代码：

<button
       *ngFor="let link of links; let i = index"
       mat-raised-button
       color="primary"
       (click)="selectedIndex = i"
       [routerLink]="link.routerLink">
</button>

我什至不知道这是否可能，但我正在寻找这样的东西：

<button
       *ngFor="let link of links; let i = index"
       mat-raised-button
       (click)="selectedIndex = i"
       [color]="selectedIndex === i ? primary : warm"
       [routerLink]="link.routerLink">
</button>

【问题讨论】：

标签： angular angular-material material-design

【解决方案1】：

很有可能，您需要将字符串文字传递给您的数据绑定[color]

[color]="selectedIndex === i ? 'primary' : 'warm'"

堆栈闪电战

https://stackblitz.com/edit/angular-npzkiu?embed=1&file=app/button-overview-example.html

【讨论】：

【解决方案2】：

您必须用引号将颜色主题名称括起来才能将其作为字符串传递：

[color]="selectedIndex === i ? 'primary' : 'warn'"

请参阅this stackblitz 以获取演示。

【讨论】：

【解决方案3】：

试试这个，把primary改成'primary'，把warn改成'warn'，应该会有你想要的效果。

<button
   *ngFor="let link of links; let i = index"
   mat-raised-button
   (click)="selectedIndex = i"
   [color]="selectedIndex === i ? 'primary' : 'warn'"
   [routerLink]="link.routerLink">
 </button>

【讨论】：

【解决方案4】：

这可以解决你的问题，使用单引号而不是没有它：

[color]="selectedIndex === i ? 'primary' : 'warn'"

【讨论】：