angular2 ngfor 仅当索引小于某个数字时答案

【问题标题】：angular2 ngfor only if index is less than certain numberangular2 ngfor 仅当索引小于某个数字时
【发布时间】：2017-01-09 23:57:29
【问题描述】：

我正在使用 ngfor 来显示不同数量的项目。我想将它可以显示的项目数量限制为 5，所以我使用：

<li  *ngFor="let item of items; let i = index;">
     <div *ngIf="i < 4">
       //more stuff ...
     </div>
</li>

但是，它似乎在为 index = 4 上的项目渲染空间。

如果我尝试：

<li  *ngFor="let item of items; let i = index;" *ngIf="i < 4"> //Notice ngIF

什么都不显示。

有什么想法吗？

【问题讨论】：

【解决方案1】：

你可以这样做：

<li *ngFor="let item of items | slice:0:5; let i = index;">
  <div>
    //more stuff ... 
  </div>
</li>

也许这是一个适合你的选项。

【讨论】：

这里 slice 的作用是什么，你能解释一下吗？
slice 创建一个新数组，其中包含 'items' 中元素的子集（在这种情况下，使用 'items' 的前 5 个元素）。因此，“ngFor”只会看到包含 5 个元素的临时数组。另见SlicePipe的文档

【解决方案2】：

你可以使用 ng-template

<ng-template ngFor let-item [ngForOf]="items"  let-i="index" >
        <div *ngIf=" i < 4">
            {{item}}
        </div>
</ng-template>

【讨论】：