时间戳

首页 > 解决方案 > 如何根据某些条件应用角度材质样式属性？

angular - 如何根据某些条件应用角度材质样式属性？

问题描述

我有一个名为 status 的枚举

export const enum Status {
    ACTIVE = "Active",
    REVIEW = "Review"
}

我有一个像垫子一样的按钮

<button class="status-button"
                 mat-raised-button  color="warn">{{myObj.realStatus}}</button>

状态按钮是我自己的类， 颜色是角材料的属性。

我想要两种基于枚举更改颜色的方法

像

  1. 如果 Enum 处于活动状态，我想要颜色警告 else primary（也就是说，我想根据从 myObj 获得的枚举条件更改 mat 按钮的颜色属性）

  2. 如果我可以基于 Enum 同时添加两个类，这是附加样式以及状态按钮

我怎样才能以更简单的方式实现这一点希望我的问题很清楚..!!

标签： angularangular-materialangular8

解决方案

  1. 为此，请在打字稿中实现以下内容：
public colorPicked: string = Status.ACTIVE? "warn" : "primary"

接下来在 HTML 中将颜色替换为您创建的新变量：

button class="status-button"
                 mat-raised-button  color="colorPicked">{{myObj.realStatus}}</button>
  1. For the second, if I understood correctly, you want to change CSS class basing on the enum. You can use NgClass to pick the class basing on the expression (class1 and class2 are css classes defined in the css file):
button [ngClass]="{'class1': Status.ACTIVE, 'class2': Status.REVIEW}">{{myObj.realStatus}}</button>

推荐阅读