在子组件属性的数据上使用切片管道会导致对@Input set方法的无限调用

Question

[将切片管道添加到下面的数据对象，并将该数据发送到子组件的@Input设置方法时，对该方法有无限次调用。当仅从数据对象中删除切片管道时，它像往常一样工作，@Input方法仅被调用一次。

父组件模板：

<ng-container
  *ngIf="[
      { name: 'a', order: 1 },
      { name: 'b', order: 2 },
      { name: 'c', order: 3 },
      { name: 'd', order: 4 },
      { name: 'e', order: 5 }] | slice:0:3 as data"
>
  <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>

子组件打字稿：

  @Input()
  set testData(testData) {
    console.log(testData);
  }

显示无限呼叫的控制台日志：

Output

完整的示例代码（必须将“ | slice：0：3”添加到app.component.html中的数据对象中，如上所示，这将导致无限调用，并且浏览器将挂起：]

https://codesandbox.io/s/3dg47

这是否是由于更改检测/ SlicePipe不纯，并且按预期方式工作？如果将带有切片的数据对象移到打字稿代码中，然后在html模板中引用它，则不会再出现此问题。如何在没有无限调用子组件@Input方法的情况下将切片保留在html模板中？

Answer 1

理想情况下，您应该使用渲染视图的管道。

就您而言，

slice-pipe-test.component.html

<table>
  <tr *ngFor="let item of myData | slice:0:3">
      <td>{{item.order}}</td>
      <td>{{item.name}}</td>
  </tr>
</table>

app.component.ts

this.data = [
  { name: 'a', order: 1 },
  { name: 'b', order: 2 },
  { name: 'c', order: 3 },
  { name: 'd', order: 4 },
  { name: 'e', order: 5 }
]

app.component.html

<ng-container *ngIf="data">
      <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>

或从打字稿中切片。

this.data = [
  { name: 'a', order: 1 },
  { name: 'b', order: 2 },
  { name: 'c', order: 3 },
  { name: 'd', order: 4 },
  { name: 'e', order: 5 }
].slice(0, 3);

模板：

<ng-container *ngIf="data">
      <slice-pipe-test [testData]="data"></slice-pipe-test>
</ng-container>