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