title: Ionic 4 Angular template binding with async pipe to observable
body: <p>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.</p>
  
  <p>In component:</p>
  
  <pre><code>this.indLbdPlayers = this.fsService.getPlayersByIndScore(id);
  this.indLbdPlayers.subscribe(players =&gt; {
    this.indArray = players;
  });
  </code></pre>
  
  <p>where </p>
  
  <pre><code>indLbdPlayers: Observable&lt;HSPlayer[]&gt;;
  indArray: HSPlayer[];
  </code></pre>
  
  <p>In template:
  <code>
  &lt;div *ngIf="!showTeamLbd"&gt;
      &lt;table&gt;
      ...
      &lt;tr *ngFor="let player of indLbdPlayers | async; let ro = odd; let i = index;"
  </code></p>
  
  <p>does not display anything. However, when use this in template:</p>
  
  <p><code>
  &lt;div *ngIf="!showTeamLbd"&gt;
      &lt;table&gt;
      ...
      &lt;tr *ngFor="let player of indArray; let ro = odd; let i = index;" let ro = odd;
  </code>
  i.e. w/out async pipe to observable but subscribing to observable in component, then the array displays as expected.</p>
  
  <p>From ionic info:</p>
  
  <p>cli packages: (/usr/local/lib/node_modules)</p>
  
  <p>@ionic/cli-utils  : 2.0.0-rc.6
     ionic (Ionic CLI) : 4.0.0-rc.6</p>
  
  <p>global packages:</p>
  
  <p>cordova (Cordova CLI) : 8.0.0</p>
  
  <p>local packages:</p>
  
  <p>@angular-devkit/core       : 0.6.0</p>
  
  <p>@angular-devkit/schematics : 0.6.0</p>
  
  <p>@angular/cli               : 6.0.1</p>
  
  <p>@ionic/schematics-angular  : 1.0.0-rc.6</p>
  
  <p>Cordova Platforms          : none</p>
  
  <p>Ionic Framework            : @ionic/angular 4.0.0-alpha.7</p>