如何在离子html显示中使用ngfor根据对象的数量并确定其余的？ [英] How to use ngfor in ionic html display according to the count of object and determining the rest?

问题描述

我是Ionic的初学者。我面临一些缺乏逻辑概念，根据对象的数量显示图像，并相应地确定其余部分。这可能不太清楚。在这里代码

I am a beginner Ionic developer. I am facing some lack logical concept to display the image according to the no of object and determine the rest accordingly. This might be not so clear. SO here the code

我想要的是假设我从数据库中获得5个图像，其余15应来自for循环。

What I want is suppose if I get 5 image from database rest 15 should come from for loop.

 <ion-grid>
      <ion-row no-padding no-margin>
        <ion-col class="food-item" col-4 *ngFor="let number of [0,1,2,3..20]" (click)="addFood()">
              <img src="http://placehold.it/250x200" >
              <div class="card-title" >
                <ion-icon name="add-circle" style="zoom: 2.5;" color="core"></ion-icon>
              </div>
          </ion-col>
      </ion-row>

      <ion-row *ngIf="food" no-padding no-margin text-center>
        <ion-col class="food-item" col-4 *ngFor="let f of food | async " class="card-background-page">
            <img [src]="f.image" (click)="editFood(f)" width="250px" height="80px">
            <div class="card-title">{{f.title}}</div>
        </ion-col>
      </ion-row>
  </ion-grid>

这里我有两行 - 一行用于显示数据库图像，另一行用于添加食物。但我想要一行用ngfor来显示食物图像，其余的将是占位符图像。

here I have made two rows -- one for displaying database image and another for adding food. But I want one row with ngfor that will display food images and rest will be placeholder image.

谢谢

推荐答案

在您的组件中，只要您获得食物，一旦您从API获得响应，请执行以下操作：

in your component wherever you are getting food, once you get response from API do the following:

while(food.length < 20) {
    food.push({});
}

HTML

<ion-grid>
    <ion-row *ngIf="food" no-padding no-margin text-center>
        <ion-col class="food-item" col-4 *ngFor="let f of food | async " class="card-background-page">
            <ng-template *ngIf="f.image; else noFood">
                <img [src]="f.image" (click)="editFood(f)" width="250px" height="80px">
                <div class="card-title">{{f.title}}</div>
            </ng-template>
            <ng-template #noFood>
                <img src="http://placehold.it/250x200" >
                <div class="card-title" >
                    <ion-icon name="add-circle" style="zoom: 2.5;" color="core"></ion-icon>
                </div>
            </ng-template>
        </ion-col>
    </ion-row>
</ion-grid> 

这篇关于如何在离子html显示中使用ngfor根据对象的数量并确定其余的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！