* ngif - 如果有東西可見，請隱藏div

我想隱藏圖像，當頁面爲空時，但當它變成填充時，我想隱藏它。我不知道如何在沒有按鈕的情況下做到這一點。

所以我

<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內容。如果有人能幫助我，那會很棒。

來源

2017-03-31 BA1995

大概就這麼簡單<div class="text" *ngIf="!shoppingList.length">

如果您shoppingList爲空尚未被填充API還使圖像將被顯示，並且沒有ion-card將被顯示，因爲沒有任何可用的。

你也可以在你的控制器使用屬性：

loading = true; 

/* snip */ 

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

然後你可以使用*ngIf=loading並具有當你顯示此輸入或不超過更明確的控制。

來源

2017-03-31 15:21:19

假設你的內容存儲在shoppingList，那麼你可以做：

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

來源

2017-03-31 15:21:13

你可以試試這個。

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

來源

2017-03-31 15:21:25 Sampath

* ngif - 如果有東西可見，請隱藏div

回答

相關問題