CODEWITHSUNDEEP
angulartypescriptrxjsobservableionic3
Sampath
Sampath

Reputation: 65860

async ngIf / Angular is not working as expected

I have a code as shown below. The problem here is async ngIf is not working. i.e. *ngIf="budgetGroups$ | async; let bg;else loading". I have a data for the observable budgetGroups$. When I removed the ngIf then it shows a list of data nicely. Can you tell me where is the issue? No errors are shown too.

Note: If you know any other way to do this please share it with me.

.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();
 }

Upvotes: 1

Views: 716

Answers (1)

coturiv
coturiv

Reputation: 2970

The problem is you're using async pipe twice. Remove it on the *ngFor section.

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

Upvotes: 2

Related Questions