Question

我在Angular 6中做一个Web应用程序，我有一个字符串数组，其中包含不同颜色的类的名称。我想将它们应用于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。

Answer 1

enter code here --data '{ "lookupStrategy": "FETCH_LIVE_DOC", "urls": [ "originalURL":"https://www.myurl.com/index.html", \ "ampURL":"https://www.myurl.com/index.html", \ "cdnAmpUrl":"https://www-myurl-com.cdn.ampproject.org/c/s/index.html" ] }'返回一个随机浮点数，而不是整数，因此Math.random()不会像数组索引那样是整数。

您需要Math.random() * this.bg.length

此外，您已在初始化函数中将bgRandom设置为恒定值，因此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]);
   }
}

Answer 2

其他帖子是正确的。您只需设置一次bgRandom，所以您只会获得相同的背景色。如@ rh16所说，Math.floor（Math.random（）* this.bg.length）也是正确的。

尝试一下：

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

和您的html

[ngClass]="getBackgroundColor()"

您可以摆脱bgRandom属性。

Angular的ngFor中的div的随机类

2 个答案: