* ngFor哪种方法更好：ng容器还是管切片？

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>

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

更新

有关此案件here

的更多信息

Answer 1

1. 第一个（管道）将仅调用切片方法一次，并根据要显示的项目（ 3个或全部）遍历模板，< / li>
2. 而第二个（后卫）将始终遍历数组中的所有元素，并对每个*ngIf 进行评估。

Answer 2

我认为第一个在性能方面会更快。不过，在距离差距10ms内的某个位置实际上不会被用户注意到。

也许一旦逻辑或列表呈现出比例尺就可以了。

您始终可以执行性能审核，以比较哪一个需要花费更多的时间进行渲染。

这是切片方法给我的：

ng-container给了我这个：

但是，正如我所说，只有7毫秒的差异将不明显。但话又说回来，采用性能更高的方法没有什么害处。

  

这是一个Working Demo，您可以用来比较它们两者。

Answer 3

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);
  }
}

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

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