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

假设您的内容存储在<img *ngIf="shoppingList.length" class="shopping-icon" src="assets/icon/shopping-list.svg">中，那么您可以执行以下操作：

{{1}}

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>

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

3 个答案: