angular - *ngFor 的哪种方法更好 : ng-container or pipe slice?

Question

我想显示完整列表或仅显示其 3 个元素 - 有条件地 (more=true/false)。我可以像这样使用管道方法

<div class="table">
  <div *ngFor="let item of list|slice:0:(more ? undefined : 3 )" class="row">
      {{ item.id }} {{ item.name }}
  <div>
</div>

或者像这样的ng-container方法

<div class="table">
  <ng-container *ngFor="let item of list; index as i">
    <div *ngIf="i<3 || more" class="row">
      {{ item.id }} {{ item.name }}
    </div>
  <ng-container>
</div>

但我不知道:哪种方法在性能方面更好？

更新: 更多关于此案例的信息:How to 'show more' rows using *ngFor

Answer 1

SlicePipe 是一个不纯 管道。这意味着每次在您的组件上运行更改检测时它都会运行。

管道每次调用时都会创建一个新数组，因此如果组件上频繁运行更改检测，它可能会导致垃圾收集过多。

您可以通过创建自己的管道并向其添加日志语句来查看效果:

@Pipe({name: 'myslice', pure: false})
export class MySlicePipe extends SlicePipe {
  transform(value: any, start: number, end?: number): any {
    console.log('Calling MySlicePipe...');
    return super.transform(value, start, end);
  }
}

尝试在使用 myslice 管道时触发组件上的 (click) 处理程序。您会在控制台中看到 Calling MySlicePipe 重复出现，表示每次都会创建一个新数组。 Demo here .

因此，就性能而言，我认为 NgIf 选项更可取。