Как стилизовать каждый элемент ngFor индивидуально, исходя из его стоимости?

Question

У меня на экране есть консоль, на которой я веду журнал. Компонент выглядит следующим образом.

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

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

Я бы хотел динамически установить класс для каждого из DIV. На данный момент каждый из них является log-type-a , но я бы предпочел, чтобы оно было log-type-b , когда строка содержит определенное значение (например, оно начинается с «b», так что класс будет log-type- first_char_of_log .

Я не уверен, что гуглить, чтобы быть с. Я пытался поиграться с ngClass , но потерпел неудачу из-за незнания и неуверенности в том, как это сделать.

Answer 1

Основано на ответе SehaxX: Вы можете проанализировать список журналов с помощью установщика. Это сохранит ваши вызовы функций в шаблоне.

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;
}

Демо

Answer 2

NgFor может иметь индекс, как этот: *ngFor="let item of items; index as i;" Вы можете использовать этот индекс для установки различных классов для ваших предметов, например class="log-type-{{ i }}".

https://angular.io/api/common/NgForOf

Answer 3

Вы можете использовать выражение в ngClass следующим образом:

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

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

Если в вашем массиве логов есть, скажем, красный и синий вывод класса должен быть:

log-type-red
log-type-blue

OR

Вы можете использовать такие функции и принимать решения в зависимости от значения журнала:

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

и компонент:

export class AppComponent implements OnInit {
  name = 'Angular';
  logs: string[]; 

  ngClassConvert(value):string{
    let returnValue = '';
    switch (value){
        case 'a': { 
        returnValue = 'Apple';
        break; 
      } 
      case 'b': { 
        returnValue = 'Banana';
        break; 
      } 
      case 'c': { 
        returnValue = 'Cherry';
        break; 
      } 
      case 'd': { 
        returnValue = 'dddd';
        break; 
      } 
      default: { 
        returnValue = 'default';
        break; 
      } 
    }
    return returnValue;
  }

  ngOnInit(): void {
    this.logs = ['a', 'b', 'c', 'd'];
  }
}

Также и Демо