由于 hero 不包含 observable，异步订阅了什么？答案

【问题标题】：What is async subscribed to since heroes does not contain observable?由于 hero 不包含 observable，异步订阅了什么？
【发布时间】：2018-01-06 08:44:17
【问题描述】：

在学习 Angular >= 2 时，我试图找到填充模板 <div *ngFor="let hero of heroes | async" 的 search(term: string): Observable<Hero[]> {} 的订阅者：

来自angular-tour-of-heroes

<div id="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
  <div>
    <div *ngFor="let hero of heroes | async"
         (click)="gotoDetail(hero)" class="search-result" >
      {{hero.name}}
    </div>
  </div>

英雄搜索服务：

@Injectable()
export class HeroSearchService {
  constructor(private http: Http) { }

  search(term: string): Observable<Hero[]> {
    return this.http
      .get(`app/heroes/?name=${term}`)
      .map((r: Response) => r.json().data as Hero[])
      .catch((error: any) => {
          console.error('An friendly error occurred', error);
          return Observable.throw(error.message || error);
      });
  }

在 heros.component.ts 中，我找到了组件绑定 heroes: Hero[];，但它不包含 HeroSearchService 中的 search(term: string): Observable<Hero[]> {} 返回的 observable。

我知道async 负责订阅 observable。但是在这里，heroes 不包含异步工作的可观察对象。

heroes 是如何被search() 填充的，因为heroes 不是一个不包含search() 返回的可观察对象？或者换一种方式问，由于 heroes 绑定没有 observable，异步订阅了什么？

【问题讨论】：

标签： angular

【解决方案1】：

您似乎在查看错误文件的模板。您正在查看的模板是 hero-search.component.html，它对应于将 heroes 定义为 observables 数组的文件 hero-search.component.ts：

hero-search.component.ts

heroes: Observable<Hero[]>;

heroes.component.ts 的模板是heroes.component.html，它不使用async，因为heroes 在这个组件中不是 Observable：

heroes.component.html

<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
  <span class="hero-element">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </span>
  <button class="delete-button" (click)="deleteHero(hero, $event)">Delete</button>
</li>

【讨论】：

谢谢，完全错过了。我以为heroes 被英雄父组件继承了。

【解决方案2】：

通过angular-tour-of-heroes 链接后，我观察到HeroSearchService 中的search 方法由hero-search.component.ts（而不是heroes.component.ts）调用，并且它具有可观察的英雄属性为heroes: Observable<Hero[]>，即预期的。

我认为你对hero-search.component.ts 和heroes.component.ts 感到困惑。

【讨论】：