Angular Material - Как изменить цвет кнопки во время выполнения

Question

Я создаю меню боковой панели, используя угловой материал. Я не нашел способа изменить цвет кнопки на основе какого-либо свойства компонента.

Я уже прочитал документацию: 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>

Answer 1

Это может решить вашу проблему, используя одинарные кавычки, а не без:

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

Answer 2

Попробуйте, измените первичный на «первичный» и предупредите на «предупредить», должен иметь желаемый эффект.

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

Answer 3

Очень возможно, вам нужно будет передать строковые литералы в привязку данных [color]

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

Stackblitz

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

Answer 4

Вы должны заключить название цветовой темы в кавычки, чтобы передать его в виде строки:

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

См. этот стек для демонстрации.