Angular 格式化打底表的角度可观测数据

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

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

一般来说，我对观察到的东西、承诺和相关的技术感到困惑，所以很难进一步描述。我读过，但没有解决我的问题

英雄界面：

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

服务中的方法：

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

所以，问题是：

这项工作：

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

您使用了错误的变量名

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



在上一行中，您将变量命名为“hero”，以访问“heros”数组的各个元素。因此，属性的名称应如下所示：

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

{{hero.id}
成功了！但是我认为你在回复中忘记了把英雄改成英雄。我还必须删除“| Async”，因为：'Element'|'不是有效的属性名。我认为在使用可观察物时这是强制性的？是的，我错过了！
<ng-template pTemplate="body" let-hero>

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