Question

我在屏幕上记录了一个控制台。该组件看起来像这样。

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

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

我想在每个DIV上动态设置一个类。目前，每个字符串都是 log-type-a ，但是当字符串包含某个值（例如，以“ b”开头，因此该类为 log-type- first_char_of_log 。

我不确定要与Google一起使用什么。我尝试过ngClass，但是由于无知和不确定性而失败。

Answer 1

NgFor可以具有一个这样的索引：*ngFor="let item of items; index as i;" 您可以使用该索引来为商品设置不同的类，例如class="log-type-{{ i }}"。

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

Answer 2

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

Demo

Answer 3

您可以像这样在ngClass中使用expresion：

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

也和Demo

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

3 个答案: