带有异步管道的 Angular *ngFor 不显示数据

Question

标题说明了一切，所以我将向您展示代码。

TS

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

模板

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

尽管数据到达，但模板不会拒绝它。也许我错过了什么...

Answer 1

有时，这些选项卡组件无法处理动态创建的子项。因此，您可以尝试延迟创建所有内容，直到异步数据可用。

<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

尝试将代码更改为以下内容：

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