异步 ngIf / Angular 未按预期工作

Question

我有一个如下所示的代码。这里的问题是 async ngIf 不起作用。即*ngIf="budgetGroups$ | async; let bg;else loading"。我有一个可观察的budgetGroups$ 的数据。当我删除ngIf 时，它会很好地显示数据列表。你能告诉我问题出在哪里吗？也没有显示错误。

注意：如果您知道任何其他方法，请与我分享。

.html

<ion-list radio-group [(ngModel)]="budgetGroup" *ngIf="budgetGroups$ | async; let bg;else loading">
    <ion-item-sliding *ngFor="let b of budgetGroups$ | async | 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[]>

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

Answer 1

问题是您使用了两次async 管道。将其删除 *ngFor 部分。

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