*ngif - 如果某些东西变得可见，则隐藏 div答案

【问题标题】：*ngif - Hide div if something becomes visible*ngif - 如果某些东西变得可见，则隐藏 div
【发布时间】：2017-08-25 22:23:38
【问题描述】：

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隐藏在底部。如果有人可以帮助我，那就太好了。

【问题讨论】：

标签： angular typescript ionic-framework ionic2

【解决方案1】：

你可以这样试试。

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

【讨论】：

【解决方案2】：

大概就像<div class="text" *ngIf="!shoppingList.length">一样简单

如果您的shoppingList 为空，则它尚未被 API 填充，因此将显示图像并且不会显示ion-cards，因为没有可用的图像。

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

loading = true;

/* snip */

this.shoppingList.push(item);
loading = false;

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

【讨论】：

【解决方案3】：

假设您的内容存储在shoppingList，那么您可以这样做：

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

【讨论】：