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

尝试将您的代码更改为此：

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

Answer 2

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

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

带异步管道的角度* ngFor不显示数据

2 个答案: