Случайный класс для div внутри ngFor в Angular - PullRequest
Новая
       8

Случайный класс для div внутри ngFor в Angular

0 голосов
/ 19 февраля 2019

Я делаю веб-приложение на Angular 6, и у меня есть массив строк с именами классов для разных цветов.Я хотел бы применить их к моему div внутри ngFor.

Моему массиву цветов: 

words = [
    'aaa', 'bbb', 'ccc', 'ddd'
  ];

bgRandom = '';

bg = [
   'bg-blue', 'bg-orange', 'bg-red', 'bg-gray', 'bg-maroon',
   'bg-info', 'bg-green', 'bg-fuchsia', 'bg-aqua', 'bg-yellow'
];

ngOnInit() {
   this.bgRandom = this.bg[Math.random() * this.bg.length];
}

Внутри моего шаблона: 

<ng-container *ngFor="let word of words">
   <div [className]="'widget-user-header' + bgRandom">
      Hi all
   </div>
</ng-container>

Прямо сейчас bgRandom вообще не появляется.Только widget-user-header отображается правильно.

Моя цель - получить все div с другим bgRandom.

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Другие сообщения верны.Вы устанавливаете bgRandom только один раз, поэтому вы получите только тот же цвет фона.Math.floor (Math.random () * this.bg.length) также правильно, как сказал @ rh16.

Попробуйте это: 

 getBackgroundColor() {
    return this.bg[Math.floor(Math.random() * this.bg.length)];
  }

и в вашем html 

[ngClass]="getBackgroundColor()"

Вы можете избавиться от своего свойства bgRandom.

0 голосов
/ 19 февраля 2019

Math.random() возвращает случайное число с плавающей точкой, а не целое число, поэтому Math.random() * this.bg.length не будет целым числом, как индекс массива.

Вам необходимо Math.floor(Math.random() * this.bg.length)

Кроме того, выустановили bgRandom постоянное значение в вашей функции инициализатора, чтобы оно было одинаковым для всех итераций в вашей *ngFor.

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

ngOnInit() {
   this.bgRandom = [];
   for (let i =0; i < this.words.length; i++) {
      bgRandom.push(this.bg[Math.random() * this.bg.length]);
   }
}

<ng-container *ngFor="let word of words; let i = index">
   <div [className]="'widget-user-header' + bgRandom[i]">
      Hi all
   </div>
</ng-container>
...