Как назначить случайный класс для * 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

Предположим, проекты - это ваш массив, поэтому я могу сопоставить ваши цвета с каждым из этих проектов. У меня есть один массив цветов

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>

Answer 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>

Answer 3

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

На всякий случай, если кому-то это нужно, я решил, используя указанную выше директиву.