Angular项目中Observable数据无法在PrimeNG Table正常显示的问题

我来帮你排查并解决这个问题，你的代码里有两个关键错误导致数据无法正常显示，咱们一步步修正：

1. 错误的async管道使用 #

你的组件代码里已经通过subscribe手动订阅了Observable，并把数据赋值给了heroes数组（这是一个普通的Hero[]类型，不是Observable），所以模板里的[value]="heroes"| async是错误的——async管道只适用于Observable/Promise类型的值，直接把它用在普通数组上会导致PrimeNG无法正确识别数据。

修正方式：去掉| async，把value绑定改成：

<p-table [value]="heroes">

2. 模板变量引用错误 #

在pTemplate="body"的模板里，你用let-hero定义了单个英雄的变量，但之后却错误地访问了heroes.id和heroes.name——heroes是整个英雄数组，而你需要访问的是当前循环的单个英雄对象hero的属性，这也是TypeScript报错Property 'id' does not exist on type 'Hero[]'的原因。

修正方式：把模板里的heroes改成hero：

<ng-template pTemplate="body" let-hero>
  <tr>
    <td>{{hero.id}}</td>
    <td>{{hero.name}}</td>
  </tr>
</ng-template>

修正后的完整PrimeNG Table代码 #

<p-table [value]="heroes">
  <ng-template pTemplate="header">
    <tr>
      <th>id</th>
      <th>name</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-hero>
    <tr>
      <td>{{hero.id}}</td>
      <td>{{hero.name}}</td>
    </tr>
  </ng-template>
</p-table>

额外说明（可选的简化方式） #

如果你想避免手动订阅Observable，也可以直接把heroes定义为Observable类型，用async管道自动处理订阅，这样组件代码可以更简洁（不需要手动写subscribe），而且完全不用修改你的HeroService：

组件代码修改 #

export class TreeTableComponent implements OnInit {
  // 把heroes改成Observable类型
  heroes$: Observable<Hero[]>;
  constructor(private heroService : HeroService) { }
  ngOnInit() {
    this.heroes$ = this.heroService.getHeroes().pipe(
      tap(heros => console.log(heros))
    );
  }
}

模板对应修改 #

<p-table [value]="heroes$ | async">
  <!-- 其余部分和之前修正后的一样 -->
</p-table>

这种方式下Angular会帮你自动管理订阅的生命周期，还能避免潜在的内存泄漏问题。

内容的提问来源于stack exchange，提问作者eulker