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

async else / Angular没有按预期工作

1 个答案: