*ngFor 的哪种方法更好：ng-container 还是 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

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

Answer 2

我认为第一个在性能方面会更快。不过，在 10 毫秒之内，用户不会真正注意到的间隙会存在。

一旦渲染的逻辑或列表按比例缩放，这可能会很清楚。

您始终可以执行性能审核来比较哪个需要更多时间渲染。

这是切片方法给我的：

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

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

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