* ngif - 보이는 항목이 있으면 div 숨기기

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> 

있습니다. 누군가가 나를 도울 수 있다면 그것은 위대 할 것입니다.

Answer 1

간단

당신의 shoppingList가 아직 API에 의해 빈 채워되지 않은됩니다 그렇다면 <div class="text" *ngIf="!shoppingList.length">로 사용할 수있는 이미지가 없으므로 이미지가 표시되고 ion-card이 표시되지 않습니다.

당신은 또한 당신의 컨트롤러 속성을 사용할 수 있습니다

loading = true; 

/* snip */ 

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

이 그럼 당신은 *ngIf=loading을 사용하고이 입력을 표시하거나하지 않을 때를보다 명시 적으로 제어 할 수 있습니다.

Answer 2

이 콘텐츠를 shoppingList에 저장되어 있다고 가정하면, 당신은 할 수 :

아마

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

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>