* ngif - Hide div wenn etwas sichtbar wird

Question

lgif verwirrt mich!

Ich möchte ein Bild ausblenden, das vorhanden ist, wenn die Seite leer ist, aber wenn es ausgefüllt wird, möchte ich es ausblenden. Ich weiß nicht, wie ich das machen soll, ohne es auf Knopfdruck zu tun. So

Ich habe

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

ich sagen will, wenn es Inhalt ist in der Vorlage oder Ionenkarte den Text div am Boden zu verstecken. Wenn mir jemand helfen könnte, wäre das großartig.

Answer 1

Wahrscheinlich so einfach wie <div class="text" *ngIf="!shoppingList.length">

Wenn Ihr shoppingList leer ist es wurde nicht aufgefüllt durch die API noch so die Bild wird angezeigt und ion-card s wird angezeigt, da keine verfügbar sind.

Sie können auch eine Eigenschaft in Ihrem Controller verwenden:

loading = true; 

/* snip */ 

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

Dann sind Sie *ngIf=loading verwenden können und haben mehr explizite Kontrolle über, wenn Sie diesen Eingang zeigen oder nicht.

Answer 2

Vorausgesetzt, dass Ihre Inhalte in shoppingList gespeichert ist, dann könnten Sie tun:

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

Answer 3

Sie können so versuchen.

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