Angular 2 Material - 如何有条件地设置工具栏的颜色

Posted 2023-03-07

【中文标题】Angular 2 Material - 如何有条件地设置工具栏的颜色

【英文标题】：Angular 2 Material - how to set the color of a toolbar conditionally

【发布时间】：2017-07-20 20:01:27

【问题描述】：

我正在使用Angular Material toolbar，它可以有三种颜色：“primary”、“accent”或“warn”。

可以通过使用颜色来改变a的颜色 财产。默认情况下，工具栏使用基于 当前主题（浅色或深色）。这可以更改为“主要”， “重音”或“警告”。

如果存在特定条件，我想将此颜色更改为“警告”。我已经尝试了以下方法：

<md-toolbar color="warn">

正确显示警告颜色。

<md-toolbar color="true ? 'warn' : null">

显示工具栏，就好像没有设置颜色一样

<md-toolbar [attr.color]="true ? 'warn' : null">

显示工具栏，就好像没有设置颜色一样

我应该如何设置它？

【参考方案1】：

你必须使用属性绑定：

<md-toolbar [color]="true ? 'warn' : null">