Angular2 Observable Observable正しく結合しない

Question

Angular2/TypeScriptで検索機能を実装しようとしています。

ただし、ビューに返された検索項目をバインドする際に問題があります。

import { Component } from '@angular/core'; 
import { SearchService } from '../services/search.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Subject } from 'rxjs/Subject'; 
import "rxjs/add/operator/debounceTime"; 
import "rxjs/add/operator/distinctUntilChanged"; 
import 'rxjs/add/operator/switchMap'; 

@Component({ 
    selector: 'search', 
    templateUrl: './app/views/search.component.html', 
    providers: [SearchService] 
}) 

export class SearchComponent { 
    items: Observable<string[]>; 
    errorMsg: string; 

    private searchTermStream = new Subject<string>(); 

    searchConfluence(term : string) { 
    // Send the search term into the Observable stream 
    this.searchTermStream.next(term); 
    } 

    ngOnInit(): void { 
    this.items = this.searchTermStream 
     .debounceTime(300) 
     .distinctUntilChanged() 
     .switchMap(term => this.searchService.titleSearch(term)); 
    } 

    constructor(private searchService: SearchService) {} 
} 

私の見解は以下の通りです：

私のコンポーネントはこれです

<h1>Search</h1> 
<input #term (keyup)="searchConfluence(term.value)" /> 
<ul style="list-style: none"> 
    <li *ngFor="let item of items | async"> 
    {{item.title}} 
    </li> 
</ul> 

マイ検索サービス：

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/observable/throw'; 

@Injectable() 
export class SearchService { 

    private searchUrl = URL_HERE; 

    constructor(private http: Http) {} 

    titleSearch(params: string): Observable<string[]> { 
    let options = new RequestOptions({ headers: this.header}); 
    let requestString = `term=${params}`; 
    return this.http.get(`${this.searchUrl}?${requestString}`, options) 
     .map(this.getData) 
     .catch(this.handleError); 
    } 

    private getData(resp: Response) { 
    let body = resp.json(); 
    console.log(body.results); 
    return body.results || []; 
    } 

    private handleError(error: Response | any) { 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    return Observable.throw(errMsg); 
    } 
} 

サーバーから返された応答は以下の通りです：

[Object, Object ... ] 

各ObjectはJSONオブジェクトです。これは私が応答として期待しているものです。

ネットワークトレースを確認したところ、正しい場所にHTTPリクエストが送信されています。また、ネットワークトレースを通じてすべての結果を表示しています。私は私の見解では何の結果も見ることができません（リストはまったく表示されません）。

EDIT：最後の編集は1つですが、重要な詳細は除外されている可能性があります。私のAngular2アプリケーションは典型的なブラウザの中にはありませんが、実際はElectronJSアプリケーションに含まれています。違いがあれば分かりません。

Answer 1

ちょうど回り込んでいた1日後、私はこの質問に答えました。

ElectronのAPIはWebブラウザと同じくらい速く更新されないので、hereにある解決策に従ったようです。

基本的に私は私のsearch.component.tsクラスでこれをやっている：

ngOnInit(): void { 
    this.searchTermStream 
    .debounceTime(300) 
    .distinctUntilChanged() 
    .switchMap(term => this.searchService.titleSearch(term)) 
    .subscribe((result) => { 
     this.items = result; 
     this.cdRef.detectChanges(); 
    }); 
    } 

出来上がり、すべてが正常に更新され、私は私の検索結果:)の素敵なリストを持っています。