Question

我正在使用mat-list指令接收JSON数据并使用*ngFor从中生成材料列表。

我还研究过并发现使用[NgClass] = "{'CssClassName': condition}"可以让我为每个列表条目应用不同的CSS类取决于我在数据本身中选择的任何值。

但是......我正在改变每个条目的背景样式，具体取决于它们的ID号，而且我有10个ID在HTML中使这个NgClass部分相当长且难以阅读，因为您无法把它分成不同的行......

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

<mat-chip class="list-item" [ngClass] = "{'one':r.id === 1, 'two':r.id === 2,'three':r.id === 3, 'four':r.id === 4,'five':r.id === 5, 'six':r.id === 6,'seven':r.id === 7, 'eight':r.id === 8, 'nine':r.id === 9, 'ten':r.id === 10}">

是否有更优雅的方式来达到我不知道的相同结果？

Answer 1

如果您的课程被命名为＆＃34; class1＆＃34;，＆＃34; class2＆＃34;，＆＃34; class3＆＃34; ...（不是＆＃34;一个＆＃34;，＆＃ 34;两个＆＃34;，＆＃34;三个＆＃34; ..）你可以使用

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

Answer 2

你可以为此制作一个功能！

[ngClass]="createClassesObject(r)"

在您的TS中

createClassesObject(r: any) {
  return {
    one: r.id === 1,
    two: r.id === 2,
    // You get the point
  };
}

编辑您甚至可以缩短功能（ proof of work ）：

indexes = ['zero', 'one', 'two', 'three']; // etc.

createClassesObject(r: any) {
  return this.indexes.reduce((p, n) => {
    if (r.id === this.indexes.indexOf(n)) { p[n] = true; }
    return p;
  }, {})
}

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

2 个答案: