*ngif - 如果某些内容变得可见，则隐藏 div

Question

ngif让我感到困惑！

我想隐藏页面为空时存在的图像，但是当它被填充时，我想隐藏它。如果不在按钮上做，我真的不知道该怎么做。

所以我有

<ion-content padding>
<template ngFor let-api [ngForOf]="shoppingList">
<ion-card>
<ion-card-header>
{{api?.name}}
</ion-card-header>
<ion-list inset>
<ion-item *ngFor="let ingredient of api.ingredientLines">
<ion-label>{{ ingredient }}</ion-label>
<ion-checkbox item-right></ion-checkbox>
</ion-item>
</ion-list>
<button ion-button block full color="danger" (click)="clear(api)">Remove</button>
</ion-card>
</template>
<div class="text">
<img class="shopping-icon" src="assets/icon/shopping-list.svg">
<p>This is your shopping list, add recipes and shop away!</p>
</div>
</ion-content>

我想说的是，当模板或离子卡中有内容时，隐藏底部的文本div。如果有人能帮助我，那就太好了。

Answer 1

可能和<div class="text" *ngIf="!shoppingList.length">一样简单

如果shoppingList为空，则 API 尚未填充该图像，因此将显示图像，并且不会显示任何可用图像ion-card。

您还可以在控制器中使用属性：

loading = true;
/* snip */
this.shoppingList.push(item);
loading = false;

然后，您可以使用*ngIf=loading并更明确地控制何时显示此输入。

Answer 2

假设您的内容存储在shoppingList中，那么您可以执行以下操作：

<img *ngIf="shoppingList.length" class="shopping-icon" src="assets/icon/shopping-list.svg">

Answer 3

你可以这样尝试。

<div class="text" *ngIf="shoppingList.length">
<img class="shopping-icon" src="assets/icon/shopping-list.svg">
<p>This is your shopping list, add recipes and shop away!</p>
</div>