动态地将类添加到来自数组的 *ngFor 内容

Question

我不太确定这样的事情是否可行，但在我的 html 组件中说我有一个像这样的 ngFor..

<div *ngFor="let card of cards">
   ... stuff in here
</div>

现在说我有一个这样的类名数组

classNames = [
   'red',
   'yellow',
   'blue',
   'green'
]

在我的 *ngFor 里面我有一个这样的 div

<div *ngFor="let card of cards">
   <div [class]='...'>
      <div class="card">
      </div>
   </div>
</div>

基本上我想要发生的是 ngFor 中的每个项目通过 classNames 数组进行循环并将其动态添加到传入数据中，例如

假设我的卡片中有 6 个项目，所以每张卡片都需要一个类名，因此它会遍历类名并给它一个类，就像这样..

<div [class]='red'>
   <div class="card">
   </div>
</div>
<div [class]='yellow'>
   <div class="card">
   </div>
</div>
<div [class]='blue'>
   <div class="card">
   </div>
</div>
<div [class]='green'>
   <div class="card">
   </div>
</div>
<div [class]='red'>
   <div class="card">
   </div>
</div>
<div [class]='yellow'>
   <div class="card">
   </div>
</div>

等等等等..

我怎么能完成这样的事情？

编辑

component.html

<div class="card" *ngFor="let card of cards; let i = index">
   <div [class]="classNames[i%classNames.length]">
      ....
   </div> 
</div>

组件.ts

export class...
  classNames = [
    'light-green',
    'dark-green',
    'aqua',
    'blue',
    'blue-purple',
    'purple',
    'purple-pink',
    'purple-orange'
  ];

Answer 1

您可以利用remainder (%) 运算符来实现：

<div *ngFor="let card of cards; let i = index">
   <div [class]="classNames[i%classNames.length]">
      <div class="card">
        {{ card }}
      </div>
   </div>
</div>

Ng-run Example

更新：

你应该如下定义数组：

classNames = [
   'light-green',
   'dark-green',
   'aqua',
   'blue',
   'blue-purple',
   'purple',
   'purple-pink',
   'purple-orange'
];

注意：我用=代替:

Answer 2

与其将任何class 随机应用到任何card 或根据某些% 在视图上决定它，我相信最好的方法是从Cards 对象本身读取它，因为它是合乎逻辑的从card 本身读取card 的所有详细信息。

因此该视图独立于那些额外的东西。

classNames = ['red','yellow','blue','green'];
cards = [{text: 1, class: this.classNames[0]},{text: 2, class: this.classNames[1]}];

你的视图应该简单地完成它的任务（渲染）

<div *ngFor="let card of cards; let i = index">
  <div [class]="card.class">
    <div class="card">
      {{ card.text}}
    </div>
  </div>
</div>