Question

我有一个离子项目，它将显示以下警报之一，级别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>

另请参阅角度文档中的Style binding。

如果您想要一个动态类（如样式表中所示），请参见前面的答案：Angular: conditional class with *ngClass

Answer 2

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

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

并像关联数组一样使用它来将style binding的color属性设置为：

<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项的值

2 个答案: