角2 - このサービスがデータを返さない理由

Question

私のマシンでローカルにホストされているjsonファイルを照会するサービスがあります。サービスへのクエリが呼び出されますが、サービスクエリからコンポーネントへのjsonデータの戻り値は常に空です。しかし、ブラウザの開発ツールを使用すると、データ付きのjsonファイルが実際に200 OKで返されていることがわかります。

私のサブスクリプションには、観測可能なデータが戻ってくるのに根本的に何か問題がありますか？どのような援助が最も高く評価されます。あなたのuserService.search観測可能で

@Injectable() 
export class UserService { 

    constructor(
     public http: Http, 
    ) {} 

    search(query: string): Observable<UserInfo[]> { 
     return this.http.get('http://localhost/test.json') 
     .map(res => res.json()); 


    } 
} 




valuechange(query) { 

    console.log("calling service from component"); 

    this.inputFormControl.valueChanges 
    .debounceTime(4000) 
    .distinctUntilChanged() 
    .subscribe(query => this.userService.search(query) 
    .subscribe(data => { 
     { 
      this.data = data 
      console.log('this.users=' + this.data); 
      console.log('this.users.length=' + this.data.length); 
     } 

     })); 
    console.log("data on return from service is " + this.data[1]); 
} 

Answer 1

あなたはチェーンにあなたの観察可能な順序であなたのvalueChangesイベント・エミッターをswitchMapようなものを使用する必要があります。

this.inputFormControl.valueChanges 
.debounceTime(4000) 
.distinctUntilChanged() 
.switchMap(query => this.userService.search(query)) 
.subscribe(data => { 
    this.data = data 
    console.log('this.users=' + this.data); 
    console.log('this.users.length=' + this.data.length); 
});