angular - 如何将随机类分配给 *ngFor 在 DOM 中生成的元素？

Question

  <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 来实现吗？

Answer 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]}`);
  }
}

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