Angular ngFor使用SlicePipe后如何访问切片集合及后继元素？

有两种简单方式可以拿到*ngFor迭代的切片后集合，从而正确访问后继元素：

方法一：组件内提前生成切片数组 #

在组件类里定义一个计算属性，提前处理好切片后的数组：

// 组件类代码
get slicedOrbit() {
  return this.orbit.slice(-5); // 这里的-5可替换为你需要的n值
}

然后在模板里直接迭代这个预处理后的数组，此时index对应的是切片数组的索引，用slicedOrbit[i+1]就能拿到正确的后继元素：

<g *ngFor="let position of slicedOrbit; index as i">
    <circle [attr.cx]="position.x" [attr.cy]="position.y" r=".2"></circle>
    <line *ngIf="slicedOrbit[i+1]" 
          [attr.x1]="position.x" [attr.y1]="position.y" 
          [attr.x2]="slicedOrbit[i+1].x" [attr.y2]="slicedOrbit[i+1].y">
    </line>
</g>

这种方式逻辑集中在组件里，适合需要多次复用该切片集合的场景。

方法二：模板内直接引用迭代集合 #

Angular的*ngFor支持通过模板变量引用迭代的原始集合（即经过slice管道处理后的数组），用let slicedCollection = ngForOf即可：

<g *ngFor="let position of orbit | slice: -5; index as i; let slicedCollection = ngForOf">
    <circle [attr.cx]="position.x" [attr.cy]="position.y" r=".2"></circle>
    <line *ngIf="slicedCollection[i+1]" 
          [attr.x1]="position.x" [attr.y1]="position.y" 
          [attr.x2]="slicedCollection[i+1].x" [attr.y2]="slicedCollection[i+1].y">
    </line>
</g>

这种方式无需修改组件代码，直接在模板里拿到切片后的集合，和你用map时的collection参数效果完全一致。

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