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

标签 angular angular2-template angular2-directives

我正在使用 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

没有显示任何内容。

有什么想法吗?

最佳答案

你可以这样做:

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

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

关于angular2 ngfor 仅当索引小于某个数字时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39282714/

相关文章:

angular - 传入多个参数或对象(单击)

angular - 如何使用 Rx 在 Angular 2 中实现可拖动的 div

Angular 2. 将数据从指令绑定(bind)到模板

typescript - 将自定义指令绑定(bind)到 Angular2 中的 Observable

angular - 如何返回一个空的可观察对象

javascript - 新的 Angular 2.0.0-rc.5 项目需要最少的包吗?

Angular 2 - 用于创建和编辑的单一表单组件

angular - 在 Angular 2 中使用逗号作为列表分隔符

javascript - 在 Angular 应用程序中,通过 chrome 开发工具检查元素时,为什么我看不到纯 html?

javascript - 无法在 Typescript 中调用函数内的函数