Как я могу ограничить ngFor в Angular HTML?

Question

мне нужно ngFor с лимитом 4 элемента, но если данные <4, мне нужно заставить l oop до 4 </p>

Пример на этом

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

Answer 1

Поскольку вы определяете свой массив где-то в своем коде, самый простой способ - это разрезать его там. В противном случае вы можете использовать трубу среза, чтобы сделать это прямо в своем коде. См. https://angular.io/api/common/SlicePipe

Так что для вас вы бы просто добавили | slice:0:4 в конец вашего ngFor

---

Редактировать: Извините, я должен был читайте внимательнее Я написал демо-версию Plunker для этого. Вы можете использовать трубу или компонент logi c.

Plunker Demo

Answer 2

Попробуйте так:

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

Answer 3

Попробуйте вот так

<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 4

Попробуйте следующим образом

[src]="imageSrc ? imageSrc  : defaultImage"

Здесь imageSrc - это src изображения, которое вы хотите поместить, и defaultImage - это src изображения, если оно недоступно. Используйте этот способ

<img *ngIf="i < 4">