Javascript 动态地将类添加到来自*ngFor的内容中

我不太确定这样的事情是可能的，但在我的html组件中，我有一个类似的ngFor

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

在我的房间里，我有一个这样的房间

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

诸如此类

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

编辑

component.html

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

您可以利用运营商实现以下目标：

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

注意：我使用

=

而不是

：

您可以利用操作符来实现：

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

---

注意：我使用

=

而不是

：

而不是将任何

类

随机应用于任何

卡

，或者根据一些

%

来决定它，我认为最好的方法是从

卡

对象本身读取它，因为从

卡本身读取
卡的所有详细信息是合乎逻辑的

因此，该视图独立于那些额外的内容

视图只需执行其任务（渲染）


{{card.text}
我认为最好的方法是从
卡
对象本身读取，因为从
卡
本身读取
卡
的所有细节是合乎逻辑的，而不是将任何
类
随机应用到任何
卡
或根据一些
%
来决定它的视图

因此，该视图独立于那些额外的内容

视图只需执行其任务（渲染）


{{card.text}
嘿，我遇到了这个错误
无法读取未定义的属性“length”
知道有什么问题吗？你检查过我的示例吗？我想你做错了什么，看不出我写的东西和你的例子完全一样，不知道为什么它不起作用。你能复制它吗？更新了我的答案吗？我收到了这个错误
无法读取未定义的属性“length”
知道什么可能是错的吗？你检查过我的例子了吗？我想你做错了什么，看不出我写的和你的例子完全一样，不知道为什么它不起作用。你能复制它吗？更新了我的答案你必须在中初始化数组。ts code你必须在中初始化数组。ts code卡对象来自一个我无法控制的api，因此，如果我能把类名放在卡片上，为什么我会随机地做呢would@JuvenileSnow这就是
视图模型
出现在图片中的地方cards对象来自一个我无法控制的api，因此我随机地做它，如果我能把类名写在卡片上，我would@JuvenileSnow这就是
视图模型
出现在图片中的地方
export class...
  classNames = [
    'light-green',
    'dark-green',
    'aqua',
    'blue',
    'blue-purple',
    'purple',
    'purple-pink',
    'purple-orange'
  ];

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

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

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>