* 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

回答

相关问题