Angular新手求助：如何为每5个元素的父容器添加row类

嘿，我帮你梳理下问题所在，再给你两个简单易懂的解决方案：

首先得说，你当前的代码逻辑有个小问题：*ngFor是放在col-1-of-5的div上的，而带[ngClass]的row div在它外面——这意味着row div只会渲染一次，而且它根本访问不到内部*ngFor的index变量，所以那个row类的判断完全不会生效。

下面是两种靠谱的实现方式：

方法1：先在组件里把数组分组（推荐新手用） #

这种方式逻辑清晰，模板也干净。

步骤1：在组件类里添加分组方法 #

打开你的组件.ts文件，添加一个把数组按每5个一组拆分的方法：

getRowGroups() {
  const rowGroups = [];
  // 每5个元素切分一次数组
  for (let i = 0; i < this.categories.length; i += 5) {
    rowGroups.push(this.categories.slice(i, i + 5));
  }
  return rowGroups;
}

步骤2：修改模板代码 #

外层循环分组后的数组，每个分组对应一个带row类的div，内层循环每个分组里的元素：

<div class="grid-on">
  <!-- 外层循环每一组，每个组对应一个row -->
  <div class="row" *ngFor="let row of getRowGroups()">
    <!-- 内层循环当前组里的每个category -->
    <div class="col-1-of-5" *ngFor="let category of row">
      <div class="item-box">
        <!-- 注意这里用[src]绑定属性，比直接{{}}更规范 -->
        <img [src]="category.imagePath" alt="{{category.name}}" class="item box__img">
        <h3 class="heading-quaternary">{{category.name}}</h3>
        <p>{{category.description}}</p>
      </div>
    </div>
  </div>
</div>

方法2：直接在模板里用索引和slice（不用修改组件类） #

如果不想改组件代码，也可以直接在模板里利用index和数组slice方法实现：

<div class="grid-on">
  <!-- 用ng-container来循环，不会生成额外DOM元素 -->
  <ng-container *ngFor="let _ of categories; let index = index">
    <!-- 每第0、5、10...个元素时，创建一个row div -->
    <div class="row" *ngIf="index % 5 === 0">
      <!-- 从当前索引开始，取最多5个元素 -->
      <div class="col-1-of-5" *ngFor="let category of categories.slice(index, index + 5)">
        <div class="item-box">
          <img [src]="category.imagePath" alt="{{category.name}}" class="item box__img">
          <h3 class="heading-quaternary">{{category.name}}</h3>
          <p>{{category.description}}</p>
        </div>
      </div>
    </div>
  </ng-container>
</div>

两种方法都能实现你要的效果，第一种更直观，适合新手理解；第二种不用改组件逻辑，适合快速调整。

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