Angular5中如何在*ngFor指令内动态添加类？

嘿，这个需求在Angular开发里挺常见的，我给你分享几个实用的实现思路，你可以根据自己的业务场景来选：

方案1：按循环索引轮询使用类（无特定业务规则） #

如果只是想让这四个类循环应用到每个面板上，不需要和数据挂钩，可以借助*ngFor的索引来实现：

首先在你的组件类里定义一个包含所有面板类的数组：

// 组件.ts文件
panelClassList = ['panel panel-primary', 'panel panel-green', 'panel panel-red', 'panel panel-yellow'];

然后修改模板里的panel元素，用[ngClass]结合索引取模来动态绑定类：

<div class="row">
  <ng-container *ngFor="let item of tripTiles; let i = index">
    <div class="col-lg-3 col-md-6">
      <div [ngClass]="panelClassList[i % panelClassList.length]"> ... </div>
    </div>
  </ng-container>
</div>

这里的i % panelClassList.length会让索引在0-3之间循环，不管tripTiles有多少项，都会依次轮着用这四个样式。

方案2：根据数据属性绑定类（贴合业务逻辑） #

如果你的tripTiles里的每个item有对应的状态/类型字段（比如status、type），可以根据这个字段来映射对应的面板类，这是最贴合业务场景的方式：

先在组件里定义一个属性到类的映射对象：

// 组件.ts文件
statusToPanelClass = {
  'default': 'panel panel-primary',
  'success': 'panel panel-green',
  'error': 'panel panel-red',
  'warning': 'panel panel-yellow'
};

假设每个item都有status属性，模板里直接通过映射获取类：

<div class="row">
  <ng-container *ngFor="let item of tripTiles">
    <div class="col-lg-3 col-md-6">
      <div [ngClass]="statusToPanelClass[item.status]"> ... </div>
    </div>
  </ng-container>
</div>

这种方式能让样式和数据逻辑紧密结合，比如状态为error的item自动用红色面板，非常直观。

方案3：随机分配类（样式多样化） #

如果只是想让每个面板的样式随机变化，不需要任何规则，可以写一个方法来随机返回类：

组件里添加方法：

// 组件.ts文件
getRandomPanelClass(): string {
  const classes = ['panel panel-primary', 'panel panel-green', 'panel panel-red', 'panel panel-yellow'];
  const randomIdx = Math.floor(Math.random() * classes.length);
  return classes[randomIdx];
}

模板里调用这个方法：

<div class="row">
  <ng-container *ngFor="let item of tripTiles">
    <div class="col-lg-3 col-md-6">
      <div [ngClass]="getRandomPanelClass()"> ... </div>
    </div>
  </ng-container>
</div>

每次循环都会随机选一个类，适合追求样式多样性且无规则要求的场景。

小提示 #

Angular的[ngClass]指令是动态绑定类的最佳选择，它会自动处理类的添加和移除，比直接用字符串插值class="{{}}"更安全可靠。

内容的提问来源于stack exchange，提问作者VIK6Galado