Как использовать ngfor в ионном отображении html в соответствии с количеством объектов и определением остальных?
Я начинающий разработчик Ionic. Я столкнулся с отсутствием логической концепции отображения изображения в соответствии с номером объекта и соответствующего определения остальных. Это может быть не так ясно. ТАК здесь код
Я хочу предположить, что если я получаю 5 изображений из базы данных, остальные 15 должны поступать из цикла for.
<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, которая будет отображать изображения еды, а остальное будет изображением-заполнителем.
Спасибо
Ответы 1
в вашем компоненте, где бы вы ни получали еду, как только вы получите ответ от API, сделайте следующее:
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>
☻ Я немного запутался в том, как реализовать приведенный выше код, у меня есть поставщик еды, где я получаю все данные о еде и файл foodDisplay.ts для загрузки и анализа еды в виде foodDisplay.html. Я дополню свой вопрос всем кодом, чтобы мой запрос был понятен.
В вашем провайдере питания после получения всех данных о еде добавьте цикл while.
Ох .. Я недавно получил bg с другими вещами. Я попробую завтра и дам вам знать. Спасибо за напоминание..
спасибо, я попробую.