仅当index小于某个数字时，angular2 ngfor

Question

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

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

但是这样做似乎是为索引= 4的项目渲染空间。

如果我尝试：

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

没有显示任何内容。

有什么想法吗？

Answer 1

你可以这样做：

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

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

Answer 2

您可以使用ng-template

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