Css 如何根据ngFor的每个元素的值分别设置其样式？

我在屏幕上有一个控制台，我可以把事情记录下来。组件看起来像这样

export class AppComponent { logs: string[]; ... }

<div *ngFor="let log of logs" class="log-type-a">{{log}}</div>

导出类AppComponent{logs:string[]；…}
{{log}}

我想在每个div上动态设置一个类。目前，每一个都是log-type-a，但我更希望它是log-type-b，当字符串包含某个值时（例如，它以“b”开头），因此该类将是log-type-log的first\u char\u

---

我不知道该用谷歌搜索什么。我试过用谷歌搜索，但由于对搜索方式的无知和不确定性而失败了。

NgFor可以有一个索引，如下所示：

*NgFor=“let item of items；index as I；”

您可以使用该索引为项目设置不同的类，如

class=“log type-{{i}”

---

NgFor可以有一个索引，如下所示：

*NgFor=“让项中的项；索引为i；”

您可以使用该索引为项目设置不同的类，如

class=“log type-{{i}”

---

您可以在ngClass中使用以下表达式：

export class AppComponent { logs: string[]; ... }

<div *ngFor="let log of logs" [ngClass]="'log-type-' + log">{{log}}</div>

或

您可以使用这样的函数，并根据日志值做出决定：

<div *ngFor="let log of logs" [ngClass]="'class-test-' + ngClassConvert (log)">
  My log value: {{ log }}
  Converted in cssClass: {{ ngClassConvert (log)}}
</div>

---

另外，和

您可以在ngClass中使用expresion，如下所示：

export class AppComponent { logs: string[]; ... }

<div *ngFor="let log of logs" [ngClass]="'log-type-' + log">{{log}}</div>

或

您可以使用这样的函数，并根据日志值做出决定：

<div *ngFor="let log of logs" [ngClass]="'class-test-' + ngClassConvert (log)">
  My log value: {{ log }}
  Converted in cssClass: {{ ngClassConvert (log)}}
</div>

---

根据SehaxX的回答，您还可以使用setter解析日志列表。这将在模板中保存函数调用

private _logs: string[];
public parsedLogs: any[];

set logs(value: string[]) {
  this._logs = value;
  this.parsedLogs = this.parseLogs(value);
}

private parseLogs(logs: string[]): any[] {
  let parsed = [];
  for (let i = 0; i < logs.length; i++){
    parsed.push({
      value: logs[i],
      style: this.ngClassConvert(logs[i])
    });
  }
  return parsed;
}

private_日志：字符串[]；
公共解析日志：任何[]；
设置日志（值：字符串[]）{
这个。_logs=值；
this.parsedLogs=this.parseLogs（值）；
}
私有解析日志（日志：字符串[]）：任意[]{
让parsed=[]；
for（设i=0；i

---

根据SehaxX的回答：您可以使用setter解析日志列表。这将在模板中保存函数调用

private _logs: string[];
public parsedLogs: any[];

set logs(value: string[]) {
  this._logs = value;
  this.parsedLogs = this.parseLogs(value);
}

private parseLogs(logs: string[]): any[] {
  let parsed = [];
  for (let i = 0; i < logs.length; i++){
    parsed.push({
      value: logs[i],
      style: this.ngClassConvert(logs[i])
    });
  }
  return parsed;
}

private_日志：字符串[]；
公共解析日志：任何[]；
设置日志（值：字符串[]）{
这个。_logs=值；
this.parsedLogs=this.parseLogs（值）；
}
私有解析日志（日志：字符串[]）：任意[]{
让parsed=[]；
for（设i=0；i

---

谢谢你的回答。我知道我不清楚目标。类不依赖于元素的索引。而是当日志元素包含文本“error”时，我希望它是红色的，否则是蓝色的。但我可能会使用索引来查看元素，并给出样式。谢谢你的回答。我意识到我不清楚目标。类不依赖于元素的索引。而是当日志元素包含文本“error”时，我希望它是红色的，否则是蓝色的。但我可能会使用索引来查看元素，并引出样式。