如何在角度 2 中使用 ngFor 仅循环遍历数组到某些对象

Posted 2023-02-22

【中文标题】如何在角度 2 中使用 ngFor 仅循环遍历数组到某些对象

【英文标题】：How to loop through array upto only some objects using ngFor in angular 2

【发布时间】：2016-11-02 12:34:36

【问题描述】：

我正在循环一个包含 6 个对象的数组并使用 ngFor，我只想循环最多 4 个元素。我该怎么做？？

<div class="item active" *ngFor="#data of lengthArray">
 content 
</div>

在 LengthArray 我有 6 个但如何只循环最多 4 个记录？？

我还想在另一个 div 中从第 4 条记录循环到第 6 条记录。如何从第 4 条记录开始？？

【参考方案1】：

您可以将slice pipe 与start 和end 参数一起使用。开始参数是必需的，结束参数是可选的。

<div class="item active" *ngFor="#data of lengthArray | slice:start[:end]">
  content 
</div>

【讨论】：

我们可以在里面有条件吗？比如 data.index==1 那么 start 应该是 4 吗？

【参考方案2】：

您可以捕获索引，然后使其小于 4

<div class="item active" *ngFor="#data of lengthArray;i=index">
    <div *ngIf="i<=4">
        content
    </div>
</div>

我还没有真正测试过代码，但是你可以在 *** 上找到很多示例，做更多的研究......

Angular 2: how to apply limit to *ngFor?

有关过滤器的更多信息... How to apply filters to *ngFor

【讨论】：

谢谢我应用了与上面答案相同的条件：[i+1]:[i+4] like that

这将创建 4 个外部 元素，其中 的内部，然后是多余数量的空外部 元素

【参考方案3】：

简单的解决方案：

<tr *ngFor=""let obj of ArrayogObjs;  let i=index">
        <td *ngIf="i<4">
            obj.name
        </td>
    </tr>

【讨论】：

这将创建 4 个 元素，里面有 ，然后是多余数量的空 元素