Question

我不太确定这样的事情是可能的，但是在我的html组件中说我有这样的感觉..

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

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

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

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

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

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

说我卡中有6个项目，所以每个卡都需要一个类名，所以它循环通过classNames并给它一个类，就像这样..

<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>

component.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或根据某些%在视图上决定，我相信最好的方法是从{{1}中读取它} object本身，因为从Cards本身读取card的所有细节是合乎逻辑的。

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

card

你的观点应该只是完成它的任务（渲染）

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

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

2 个答案: