Angular *ngFor with async pipe doesn't show data

1
votes

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

2
angularngforangular2-observables
Make sure that getAll method is returning something – Jamal Salman
It does. Im sure!!! – Bruno Miguel
I don't think it's the problem but the parentheses are useless around "notificationsChannels | async" – Jamal Salman
i already tried without them too... – Bruno Miguel

2 Answers

0
votes

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

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>