如何对 *ngFor 应用数量限制？ [复制]

Posted 2023-03-13

【中文标题】如何对 *ngFor 应用数量限制？ [复制]

【英文标题】：How can I apply a quantity limit to *ngFor? [duplicate]

【发布时间】：2016-07-23 03:29:45

【问题描述】：

由于限制过滤器从 Angular 2+ 中消失，我如何为简单的 *ngFor 语句应用限制？

<div *ngFor="#tweet of singleCategory">
   tweet 
</div>

我不希望 *ngFor 语句循环遍历 singleCategory 的所有元素，我希望将其限制为仅 2 个结果。我相信它可以用自定义管道来完成，但我不知道如何实现它。

谢谢。

【问题讨论】：

你可以做一个过滤器或简单地捕获索引#i=index并添加一个ngIf i < 2

切片管的文档可以在angular.io/api/common/SlicePipe找到

另请参阅此答案：***.com/a/37818735/239168

【参考方案1】：

您可以使用索引在元素上应用 ngIf：

<div *ngFor=" let tweet of singleCategory;  let i=index">
    <div *ngIf="i<2">
        tweet
    </div>
</div>

如果您不想要包装 div，请查看template syntax：

<ng-template ngFor let-tweet [ngForOf]="singleCategory" let-i="index">
    <div [ngIf]="i<2">
        tweet
    </div>
</ng-template>

最好先/而不是使用过滤器过滤组件中的元素，以防止在显示数据时出现不必要的循环：

public get singleCategory() 
   return this.categories.filter((item, index) => index > 2 )

还有创建管道的选项。 （见链接的副本）

【讨论】：

现在模板语法is deprecated，你应该使用let tweet而不是#tweet

只有一个选项：<div *ngFor="let item of (model ? model.slice(0,2): [])" >

现在在 Angular4+ 中 <template> 已被弃用。使用<ng-template> 甚至<ng-container>。

我喜欢这个解决方案：***.com/questions/37818677/…

我发现@georgeos 提供了最好的解决方案