javascript - 动态地将类添加到数组中来自 *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>

等等……

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

编辑

组件.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'
];

注意:我使用=代替: