CODEWITHSUNDEEP
angularionic-framework
Larry King
Larry King

Reputation: 449

Ionic 4 Angular template binding with async pipe to observable

I am moving an old ionic app from V2 to V4-alpha and am unable to bind in template to an observable using async pipe. The issue arises by having an *ngFor on an element nested inside another element with an *ngIf. The table displays fine when not using the *ngIf, but does not display data table when *ngIf is included and is used to switch between different data tables.

In component:

this.indLbdPlayers = this.fsService.getPlayersByIndScore(id);
this.indLbdPlayers.subscribe(players => {
  this.indArray = players;
});

where 

indLbdPlayers: Observable<HSPlayer[]>;
indArray: HSPlayer[];

In template: <div *ngIf="!showTeamLbd"> <table> ... <tr *ngFor="let player of indLbdPlayers | async; let ro = odd; let i = index;"

does not display anything. However, when use this in template:

<div *ngIf="!showTeamLbd"> <table> ... <tr *ngFor="let player of indArray; let ro = odd; let i = index;" let ro = odd; i.e. w/out async pipe to observable but subscribing to observable in component, then the array displays as expected.

From ionic info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils : 2.0.0-rc.6 ionic (Ionic CLI) : 4.0.0-rc.6

global packages:

cordova (Cordova CLI) : 8.0.0

local packages:

@angular-devkit/core : 0.6.0

@angular-devkit/schematics : 0.6.0

@angular/cli : 6.0.1

@ionic/schematics-angular : 1.0.0-rc.6

Cordova Platforms : none

Ionic Framework : @ionic/angular 4.0.0-alpha.7

Upvotes: 0

Views: 2155

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

Try with this,

  *ngFor="let player of (indLbdPlayers | async)"; let ro = odd; let i = index;"

Upvotes: 0

Related Questions