Question

有一个输入文本，对于每次更改，他都会从我的服务中获取搜索结果。我的服务返回：包含所有结果的Observable。它将返回多人。

tamplate.html：

<input type="text" id="inputSearch">
...
<tr *ngFor="let person of items$ | async" ...
...

代码：

import { Component ,OnInit} from '@angular/core';
import {Control} from '@angular/common';
import {PersonService} from "./person.service";
import {Person} from "./person.class";
import {Observable} from "rxjs/Rx"

@Component({
  selector: 'contact-table',
  moduleId: module.id,
  templateUrl: 'contact-table.component.html',
  styleUrls: ['contact-table.component.css']
})
export class ContactTable implements OnInit {
  private items$: Observable<Person[]>;
  private inputChanged$:Observable<{}>;

  constructor(private _PersonService:PersonService) {}

  public ngOnInit() {
    this.inputChanged$=Observable.fromEvent(document.getElementById("inputSearch"), 'input');
    this.items$= this.inputChanged$
      .map((event:any)=>event.target.value)
      .switchMap((value:string) =>{
        return this._PersonService.getPersons(); <<-- it gets here!****
      })
      .toArray();
    this.items$.subscribe((persons:Person[])=>{
      console.log(persons); <<-- it doesn't gets here!****
    });
  }
}

UPDATE1：

通过GünterZöchbauer的提示，我在方法的最后一行添加了手动订阅，但该代码从未被执行，也没有记录任何内容。知道为什么吗？

UPDATE2： 我添加了我的代码的完整ts文件。

Updated3：

解决了 - 但不知道为什么:(我搬到了Array（））

  public ngOnInit() {
    this.inputChanged$=Observable.fromEvent(document.getElementById("inputSearch"), 'input');
    this.items$= this.inputChanged$
      .map((event:any)=>event.target.value)
      .switchMap((value:string) =>{
        return this._PersonService.getPersons().toArray(); <<-- moved here
      }); <<-insead of here.

    this.items$.subscribe((persons:Person[])=>{
      console.log(persons); <<-- it doesn't gets here!****
    });

知道为什么会造成任何差异吗？

* ngFor |异步不起作用

0 个答案: