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