Angular嵌套ngFor循环中对内部循环进行三分切片的实现疑问

你原来的代码里用slice:i:j是拿外层循环的行、列索引当切片参数，这逻辑根本不对，没法把placeholders固定拆成3部分，得重新调整。

先搞清楚Angular slice管道的用法：slice:start:end，start是切片的起始索引（包含这个位置的元素），end是结束索引（不包含，要是省略就直接取到数组最后）。

要把placeholders拆成3段连续的部分，得根据数组总长度算每段的起止索引，再结合内层col的索引j来动态生成切片范围。

修改后的代码示例 #

假设外层matrix里每个row都有3个col（正好对应3个切片部分），代码改成这样：

<div class="row" *ngFor="let row of matrix; index as i">
  <div class="col" *ngFor="let col of row; index as j">
    <!-- 先拿到数组总长度，方便计算切片范围 -->
    <ng-container *ngIf="placeholders.length as totalLen">
      <div *ngFor="let placeholder of placeholders | slice:getStartIndex(j, totalLen):getEndIndex(j, totalLen)">
        <ng-container [ngComponentOutlet]="placeholder.component"> 
        </ng-container>
      </div>
    </ng-container>
  </div>
</div>

然后在你的组件类里加两个计算索引的方法：

getStartIndex(j: number, totalLen: number): number {
  // 先算每部分的基础长度
  const partLen = Math.floor(totalLen / 3);
  return j * partLen;
}

getEndIndex(j: number, totalLen: number): number {
  const partLen = Math.floor(totalLen / 3);
  // 最后一部分直接取到数组末尾，避免余数遗漏
  return j === 2 ? totalLen : (j + 1) * partLen;
}

不用写组件方法的简化版 #

如果不在乎最后一段和前两段长度可能不一样，也可以直接在模板里写表达式：

<div class="row" *ngFor="let row of matrix; index as i">
  <div class="col" *ngFor="let col of row; index as j">
    <div *ngFor="let placeholder of placeholders | slice:(j * (placeholders.length / 3)):((j + 1) * (placeholders.length / 3))">
      <ng-container [ngComponentOutlet]="placeholder.component"> 
      </ng-container>
    </div>
  </div>
</div>

不过这种写法在placeholders长度不是3的倍数时，会出现小数索引，Angular会自动取整，但最后一段可能比前两段多几个元素，要是对长度一致性有要求，还是用组件方法更靠谱。

注意点 #

• 得保证外层每个row对应的col数量是3，这样每个col才能对应一个切片部分
• 要是每个row需要独立拆分placeholders，可以结合行索引i再加额外逻辑
• 最好加个空值判断，避免placeholders为空时出现报错

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