如何将随机类分配给 DOM 中生成的 *ngFor 元素？答案

【问题标题】：How to assign random class to *ngFor generated elements in the DOM?如何将随机类分配给 DOM 中生成的 *ngFor 元素？
【发布时间】：2018-09-10 02:54:54
【问题描述】：

  <div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete */random class/*">
    </div>
  </div>

我有预定义的类 = ['teal', 'pink', 'green', 'orange', 'magenta'];当 *ngFor 填充 DOM 时，我想随机分配其中一个类。我试图通过在组件中生成随机 0-4 数字并分配 [class]="randomClassName():className" 来实现，但是在检查错误后我正在更改表达式。 [ngClass] 也没有帮助。有没有办法使用指令或其他 api 来实现这一点？

【问题讨论】：

标签： angular angular5

【解决方案1】：

@Directive({
  selector: '[randomColor]'
})
export class RandomColorDirective implements OnInit {
   constructor(private elRef: ElementRef, private renderer: 
   Renderer2) {}
   ngOnInit(): void {
     const COLORS = ['teal', 'pink', 'green', 'orange', 
     'magenta'];
     let randomNumber = Math.floor(Math.random() * 
     COLORS.length);
     this.renderer.addClass(this.elRef.nativeElement, 
     `${COLORS[randomNumber]}`);
  }
}

以防万一有人需要它，我使用上面的指令解决了它。

【讨论】：

【解决方案2】：

在你的 .ts 文件中 -

public classValues = ['teal', 'pink', 'green', 'orange', 'magenta'];

在您的 HTML 文件中 -

 <div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete classValues[i]" 
    [ngClass] = "(index == classValues.length - 1) ? index = 0:''">
    </div>
  </div>

【讨论】：

收到此错误：解析器错误：条件表达式（索引 == classValues.length - 1）？ index = 0:'' 需要表达式末尾的所有 3 个表达式 [(index == classValues.length - 1) ?索引 = 0:'']

【解决方案3】：

假设项目是你的数组，所以我可以将你的颜色映射到这个项目中的每一个。我有一组颜色

colors = ['grad1', 'grad2', 'grad3', 'grad4', 'grad5', 'grad6'];

您可以在 .scss 文件中声明此颜色类，并将此颜色映射到您的 .ts 文件中，如下所示

this.projects.map(project => {
          project.color = this.colors[Math.floor(Math.random() * this.colors.length)];
          return project;
        });

同时更新您的 .html 文件，如下所示

<div *ngFor="let project of projects; let i = index;">
    <div class="project-card details-complete" [ngClass]="project.color">
    </div>
  </div>

【讨论】：