Question

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

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

HeroSearchService：

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

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

我知道async会处理对observable的订阅。但是在这里，heroes不包含异步的observable。

heroes如何search()填充heroes，因为search()不包含heroes返回的可观察量？或另一种方式询问，因为{{1}}绑定没有可观察的异步订阅了什么？

Answer 1

看起来你正在查看错误文件的模板。您正在查看的模板是hero-search.component.html，它对应于将hero-search.component.ts定义为可观察数组的文件heroes：

<强>英雄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>

Answer 2

在完成angular-tour-of-heroes链接后，我发现search中的HeroSearchService方法被hero-search.component.ts调用（而不是heroes.component.ts）＆amp;它具有可观察的英雄属性heroes: Observable<Hero[]>，这是预期的。

我认为你在hero-search.component.ts＆amp;之间感到困惑heroes.component.ts。

什么是async订阅，因为英雄不包含可观察的？

2 个答案: