如何在 Angular HTML 中限制 ngFor？

Question

我需要 ngFor 限制 4 个项目，但如果数据 < 4，我需要强制循环直到 4

示例在此

<img *ngFor="let item of [1,2,3,4]"
    src="assets/images/no-image.jpg"
    style="border-radius: 50%; height:90%;" />

Answer 1

试试这个方法：

<div *ngFor="let item of list; let i=index">
   <img *ngIf="i<4">{{item.text}}</img>
</div>

Answer 2

试试这个方法

<ng-container *ngFor="let item of [1,2,3,4] ; let i = index">
   <img *ngIf="i < 4"
    src="assets/images/no-image.jpg"
    style="border-radius: 50%; height:90%;" />
</ng-container>

Answer 3

由于您在代码中的某处定义了数组，因此最简单的方法是将其切片。 否则，您可以使用切片管道，以便您可以在代码中正确执行此操作。 见https://angular.io/api/common/SlicePipe

所以对你来说，你只需添加| slice:0:4 | slice:0:4到 ngFor 的结尾

---

编辑：对不起，我想我应该更仔细地阅读。 我为此编写了一个Plunker Demo。 您可以使用管道或组件逻辑解决方案。

Plunker 演示

Answer 4

试试这个方法

[src]="imageSrc ? imageSrc  : defaultImage"

这里imageSrc是src你想要把图像和defaultImage是src的形象，如果没有可用的。 用这种方式

<img *ngIf="i < 4">