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>

async ngIf / Angular未按预期工作

1 个答案: