async else / Angular 未按预期工作

Question

我有一个如下所示的代码。它在 ngIf 用例上运行良好。但是else 用例存在问题。也就是说，它显示 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

代码

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