angular 5-条件CSS应用程序-有更简单的方法吗？

我正在接收JSON数据，并使用

*ngFor

指令通过

mat list

从中生成一个材料列表

我还研究发现，使用

[NgClass]=“{'CssClassName'：condition}”

可以对每个列表条目应用不同的CSS类 取决于我在数据本身中选择的任何值

然而。。。我正在根据每个条目的ID号更改其背景样式，我有10个ID，这使得HTML中的

NgClass

部分相当长，并且很难阅读，因为您无法将其拆分为不同的行

您可以在下面看到实际代码行的长度-当然，文本确实在我的编辑器中换行，但它看起来仍然很可怕-

---

有没有一种更优雅的方法可以达到我所不知道的同样结果？

你可以为此做一个函数

[ngClass]="createClassesObject(r)"

在你的口袋里

createClassesObject（r:any）{
返回{
一：r.id==1，
二：r.id==2，
//你明白了
};
}

编辑您甚至可以缩短函数（）：

索引=['0'、'1'、'2'、'3']；//等
CreateClasseObject（r:任意）{
返回此.index.reduce（（p，n）=>{
如果（r.id==this.indexes.indexOf（n））{p[n]=true；}
返回p；
}, {})
}

您可以为此制作一个函数

[ngClass]="createClassesObject(r)"

在你的口袋里

createClassesObject（r:any）{
返回{
一：r.id==1，
二：r.id==2，
//你明白了
};
}

编辑您甚至可以缩短函数（）：

索引=['0'、'1'、'2'、'3']；//等
CreateClasseObject（r:任意）{
返回此.index.reduce（（p，n）=>{
如果（r.id==this.indexes.indexOf（n））{p[n]=true；}
返回p；
}, {})
}

如果你的班级被命名为“class1”、“class2”、“class3”。。。（不是“一”、“二”、“三”）你可以使用

<mat-chip class="list-item" [ngClass]="'class'+r.id">

如果你的班级被命名为“class1”、“class2”、“class3”。。。（不是“一”、“二”、“三”）你可以使用

<mat-chip class="list-item" [ngClass]="'class'+r.id">

哦，太棒了！我没有意识到这是可行的。比重构我所有的代码XDoh groovy简单多了！我没有意识到这是可行的。比重构我所有的代码简单多了，谢谢你的解释！这在技术上很有意义，尽管我会接受@Eliseo上面的回答，但不要认为我不喜欢或不欣赏你的回答！：-）没问题，我也对他的答案投了赞成票。它更干净更容易！谢谢你的解释！这在技术上很有意义，尽管我会接受@Eliseo上面的回答，但不要认为我不喜欢或不欣赏你的回答！：-）没问题，我也对他的答案投了赞成票。它更干净更容易！