Angular ngFor 与 ngClass

Question

我有一个包含天气状况的数组和一个带有图标 class 名称的数组，其大小与天气状况相同。我想用 iconNames[i] 的 class 名称显示 'i' 标签。我该怎么做？

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [ngClass]="{iconNames[i]}"></i>
</li>

Answer 1

你可以使用 class binding：

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [class]="iconNames[i]"></i>
</li>

Answer 2

要使用 ngClass，您可以在组件中创建函数并在 *ngFor 中调用它以获取动态值

getClassName(i) {
    return iconNames[i];
}

来电html

<li *ngFor="let item of weather; let i = index">
  <h1>{{ item.valid_date }}</h1>
  <h2>{{ item.temp }}</h2>
  <i [ngClass]="getClasses(i)"></i>
</li>

Angular ngFor 与 ngClass

Angular ngFor with ngClass

angular

ngfor

ng-class