为 PrimeNG Table 格式化 Angular 可观察数据

Question

我有一个基于 Angular.io 教程的项目，包括“Hero”-接口和数据，以及一个使用 HTTPClient 的“HeroService”。

我能够在模板中使用标准 HTML 获取数据并显示它，但在使用 PrimeNG table 时不能，使用他们网页中的示例。所以我有模板所需的数据，但我不确定如何将其正确传递给 PrimeNG。我希望在不改变 HeroSerice 工作方式的情况下做到这一点。

我通常对 Observables、Promises 和相关技术感到困惑，因此很难进一步描述。我已阅读 Using PrimeNG with Observables (rxjs) in Angular 4，但没有解决我的问题。

英雄界面：

export interface Hero {
  id: number;
  name: string;
}

InMemoryDataService:

export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const heroes = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];
    return {heroes};
  }

来自 HeroService 的方法：

  /** GET heroes from the server */
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        catchError(this.handleError<Hero[]>('getHeroes', []))
      );
  }

我的 TreeTableComponent:(在我将其缩小为 table 之前命名）

export class TreeTableComponent implements OnInit {

  heroes: Hero[] = [];
  

  constructor(private heroService : HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }
  
  getHeroes(): void {
    this.heroService.getHeroes().pipe(tap(heros => console.log(heros)))
    .subscribe((heroes: Hero[]) => {
      this.heroes = heroes as Hero[];
    }
      )};

所以，问题：

这个有效：

  <ul class="heroes">
    <li *ngFor="let hero of heroes">
      <a routerLink="/detail/{{hero.id}}">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </a>
    </li>
  </ul>

但这不是：

<p-table [value]="heroes"| async>
    <ng-template pTemplate="header">
        <tr>
            <th>id</th>
            <th>name</th>        
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-hero>
        <tr>
            <td>{{heroes.id}}</td>
            <td>{{heroes.name}}</td>
        </tr>
    </ng-template>
  </p-table>[enter image description here][1]

我得到的错误是：

TS2339：属性 'id' 在类型 'Hero[]' 上不存在。

TS2339：属性 'name' 在类型 'Hero[]' 上不存在。

![1]: https://i.stack.imgur.com/EJ06E.png

Answer 1

您使用了错误的变量名。

<ng-template pTemplate="body" let-hero>

在上面的行中，您将变量命名为“hero”以访问“heroes”数组的各个元素。所以，应该这样调用属性：

<td>{{hero.id}}</td>

为 PrimeNG Table 格式化 Angular 可观察数据

Format Angular observable data for PrimeNG Table

angular

primeng

angular2-observables

rxjs-observables