Angular 如何'；显示更多'；使用*ngFor的行

我有以下代码（头部简化-未测试）

{{item.id}{{item.name}
{{更多？'less'：'more'}

我只想在开头显示前3个列表项，当用户单击“更多”时，我想显示所有列表项。怎么做

更新 有关此情况下性能的更多详细信息，请参见和使用

（不会创建任何附加节点），如下所示

{{item.id}{{item.name}
{{更多？'less'：'more'}

您可以使用创建包含数组子集的新数组

{{item.id}{{item.name}
{{更多？'less'：'more'}

另一种方法是使用：

{{item}}
{{更多？'less'：'more'}

---

另外，使用

of

代替

中的
，使用
*ngFor
代替pipe
|
我们可以直接使用slice:
让列表项。slice（0，更多？未定义：3）
-所以我想知道-pipe更糟/更好吗？（我询问有关性能的问题）主要区别在于，
.slice（）
是一个函数调用，可以在触发更改检测时执行，而
SlicePipe
是纯函数调用。这意味着，它仅在传递的参数更改时执行。因此，我建议避免在模板内部调用方法（或使用getter），因为应用程序越大，它们可能会对性能产生巨大影响。在我之前的评论中提供的链接中添加此评论作为问题的答案，我们可以直接使用slice：
让更多的项目？list:list.slice:（0,3）
-所以我想知道-管道是否更差/更好？（我问了一个关于性能的问题）
<div class="table">
  <div *ngFor="let item of list" class="row">
    {{ item.id }} {{ item.name }}
  </div>
</div>

<button (click)="more = !more">{{ more ? 'less':'more' }}</button>