Угловой ngFor с ngClass

Question

У меня есть массив с погодными условиями и массив с именами классов значков того же размера, что и погодные условия.Я хочу показать тег 'i' с именем класса iconNames [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

Чтобы использовать 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>

Answer 2

Вы можете использовать привязку класса для этого:

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