Angular如何使用*ngFor实现Material表格每行展示4个技能项

方案1：CSS Flex布局实现（推荐） #

无需修改业务逻辑，仅通过样式控制每行展示4个技能，适配性更强。

模板代码修改：

<ng-container matColumnDef="skills" class="skillsColumn">
      <mat-header-cell *matHeaderCellDef class="skillsColumn">Skills
      </mat-header-cell>
      <mat-cell *matCellDef="let row" class="skillsColumn">
        <div class="skill-container">
          <ng-container *ngFor="let skill of row.skills">
            <span class="skill-item">{{ skill.name }}</span>
          </ng-container>
        </div>
      </mat-cell>
</ng-container>

对应样式代码：

.skill-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-item {
  /* 按每行4个计算宽度，减去间距冗余 */
  flex: 0 0 calc(25% - 6px);
}

方案2：TS逻辑分组实现 #

通过数组分组纯逻辑控制每行4个技能，展示规则完全可控。

组件类新增分组方法：

chunkArray(arr: any[], chunkSize: number) {
  const result = [];
  for (let i = 0; i < arr.length; i += chunkSize) {
    result.push(arr.slice(i, i + chunkSize));
  }
  return result;
}

模板代码修改：

<ng-container matColumnDef="skills" class="skillsColumn">
      <mat-header-cell *matHeaderCellDef class="skillsColumn">Skills
      </mat-header-cell>
      <mat-cell *matCellDef="let row" class="skillsColumn">
        <ng-container *ngFor="let skillGroup of chunkArray(row.skills, 4)">
          <div class="skill-row">
            <ng-container *ngFor="let skill of skillGroup">
              {{ skill.name + " " }}
            </ng-container>
          </div>
        </ng-container>
      </mat-cell>
</ng-container>

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