async else/Angular가 예상대로 작동하지 않습니다.

Question

다음과 같은 코드가 있습니다. ngIf 유스 케이스에서 올바르게 작동합니다. 하지만 else 유스 케이스 문제가 있습니다. 즉, 다른 부분을 보여 주며 갑작스럽게 사라진 부분은 observable입니다. 즉, 데이터의 변경이 없습니다. 왠지 말해줘? 어떻게 피하는가?

이

지금의 동작입니다 :

HTML

<ion-list radio-group [(ngModel)]="budgetGroup" *ngIf="budgetGroups$ | async; let bg;else loading"> 
     <ion-item-sliding *ngFor="let b of bg | orderByBudgetGroup"> 
      <ion-item> 
      <ion-label>{{b.name }}</ion-label> 
      <ion-radio [value]="b.id" (ionSelect)="selectedBudgetGroup(b)"></ion-radio> 
      </ion-item> 
      <ion-item-options side="right"> 
      <button ion-button (click)="editBudgetGroup(b)" color="primary"> 
       <ion-icon name="ios-create-outline"></ion-icon> 
      </button> 
      <button ion-button (click)="deleteBudgetGroup(b)" color="danger"> 
       <ion-icon name="ios-trash-outline"></ion-icon> 
      </button> 
      </ion-item-options> 
     </ion-item-sliding> 
     <ion-item> 
     </ion-item> 
     </ion-list> 

    <ng-template #loading> 
     <ion-grid> 
      <ion-row class="header"> 
      </ion-row> 
      <ion-row class="footer"> 
      <ion-col col-12 class="font-size-14" text-center> 
       <div> 
       <P class="margin-bottom-0">No Budget Group. You can create them by </P> 
       <p class="margin-top-0">tapping the “+” button above</p> 
       </div> 
      </ion-col> 
      </ion-row> 
     </ion-grid> 
     </ng-template> 

.TS

budgetGroups$: Observable<BudgetGroup[]>;budgetGroup: string; 

ionViewDidLoad() { 
    this.budgetGroups$ = this.budgetGroupProvider.getAllBudgetGroups().valueChanges(); 
} 

service.ts

getAllBudgetGroups(): AngularFirestoreCollection<BudgetGroup> { 
    return this.budgetGroupCollectionRef = this.fireStore.collection(`userProfile/${this.userId}/budgetGroup`); 
    } 

Answer 1

budgetGroups는 빈 배열 심지어 []을 보여 것을 반환합니다. *ngIf 빈 배열을 검색하지 않으므로 반환 값이 비어 있는지 확인해야합니다.

코드

<ion-list radio-group [(ngModel)]="budgetGroup" 
*ngIf="(budgetGroups$ | async)[0]; let bg;else loading">