将 css 分配给 *ngFor 项目的值

Question

我有 ion-item 会显示以下警报之一，级别 1、级别 2 或级别 3 紧急情况。

<ion-item text-wrap *ngFor="let item of levelofEmergency">
    {{item.level}}
</ion-item>

我想做的是根据关卡的文字分配css。即警报为灰色，1 级为绿色等。

<ion-item text-wrap *ngFor="let item of statuslevelEmergency">
    <span style="color:red" *ngIf="item.level === 'Alert'">{{item.level}}</span>
</ion-item>

提前感谢您给我指明正确方向的任何信息。

Answer 1

您可以绑定到样式，然后添加条件逻辑

<ion-item text-wrap *ngFor="let item of statuslevelEmergency">
    <span [style.color]="item.level === 'Alert' ? 'red' : 'green'">{{item.level}}</span>
</ion-item>

另请参阅 angular 文档中的 Style binding。

如果您想要动态 class（如在样式 sheet 中找到的那样），请参阅之前的答案：

Answer 2

您可以在具有索引签名的对象中定义级别颜色：

levelColors: { [level: string]: string } = {
  Alert: "grey",
  Level1: "green",
  Level2: "blue",
  Level3: "orange",
  Emergency: "red",
};

并像关联数组一样使用它来设置 color 属性 style binding:

<ion-item text-wrap *ngFor="let item of items" [style.color]="levelColors[item.level]">
  <span>{{item.level}}</span>
</ion-item>

有关演示，请参阅 this stackblitz。

使用 Map 对象可以获得相同的结果：

levelColors = new Map<string, string>([
  ["Alert", "grey"],
  ["Level1", "green"],
  ["Level2", "blue"],
  ["Level3", "orange"],
  ["Emergency", "red"],
]);

在模板中使用略有不同的语法：

<ion-item text-wrap *ngFor="let item of items" [style.color]="levelColors.get(item.level)">
  <span>{{item.level}}</span>
</ion-item>

有关演示，请参阅 this stackblitz。

将 css 分配给 *ngFor 项目的值

Assign css to value of *ngFor item

css

angular

ionic4