Angular *ngFor with async pipe doesn't show data

Question

The title says it all, so i will show you the code.

TS

notificationsChannels: Observable<{ name: string }[]>;
ngOnInit() {
      this.notificationsChannels = this._notificationsManagerService
         .getAll(this.endPoint)
         .pipe(
             map(res =>
                 res.body.map(config => {
                    return { name: config['entityName'] };
                 })
              )
         );
}

Template

<p-tabView>
    <p-tabPanel [header]="channel.name | humanizeText" *ngFor="let channel of (notificationsChannels | async)">
    </p-tabPanel>
</p-tabView>

Although the data arrives the template does not reflet it. Maybe im missing something...

Answer 1

Sometimes these tab components can't handle children being created dynamically. So you could try delaying the creation of everything until the async data is available.

<ng-container *ngIf="notificationsChannels | async as channels">
   <p-tabView>
      <p-tabPanel [header]="channel.name | humanizeText" *ngFor="let channel of channels">
      </p-tabPanel>
   </p-tabView>
</ng-container>

Answer 2

Try changing your code to this:

<p-tabView>
  <ng-container *ngFor="let channel of notificationsChannels | async">
    <p-tabPanel [header]="channel.name | humanizeText">
    </p-tabPanel>
   </ng-container>
</p-tabView>