Ionic 4 Angular template binding with async pipe to observable

Question

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

Sajeetharan · Accepted Answer · 2018-06-09 06:44:45Z

0

Try with this,

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

answered Jun 9, 2018 at 6:44

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Larry King Over a year ago

Thanks, but that makes no difference. My observable is coming from Angularfire2 where I query Firestore. I have a sibling app that is pure Angular (6.0.X) that performs similar queries of same database and the async pipe renders as expected. I hope it's something simple, but I'm getting concerned it's more fundamental to ionic/angular v4.

Larry King Over a year ago

Updated the question above - this issue appears to be related to the *ngFor being nested inside *ngIf, even though on a different element.

Collectives™ on Stack Overflow

Ionic 4 Angular template binding with async pipe to observable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related