如何在 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">