angular - *ngif - 何かが表示されるようになったらdivを非表示にする

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>

テンプレートや ion-card にコンテンツがある場合、下部のテキスト div を非表示にしたいと言いたいです。誰か手伝ってくれるとありがたいです。

回答 #1

おそらく次のようにシンプルです：<div class="text" *ngIf="!shoppingList.length">

もしあなたの shoppingList が空の場合、それはまだ API によってデータが入力されていないということで、画像が表示され、利用可能な ion-card がないため、ion-card は表示されません。

コントローラーでプロパティを使用することもできます：

loading = true;

/* snip */

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

それから、*ngIf=loading を使用して、この入力を表示するタイミングをより明確に制御することができます。

回答 #2

コンテンツが shoppingList に保存されていると仮定すると、次のようにできます:

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