異步其他/ 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();
 }

服務

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