Angular ngFor with ngClass

Question

我有一个天气条件阵列和一个图标类名称的arrray，其大小与天气条件相同。我想用iconNames [i]的类名显示'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>