Angular2 Observable沒有正確綁定

我正在通過Angular2/TypeScript實現搜索功能。Angular2 Observable沒有正確綁定

但是我在綁定返回視圖的搜索項時遇到了一些麻煩。

我的部分是這樣的：

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請求正在發射到正確的位置，並且我也得到了返回結果（再次，所有通過網絡跟蹤查看）。我無法在我的視圖中查看任何結果（該列表根本沒有出現）。

編輯：最後一次編輯，但我可能已經遺漏了一個關鍵的細節;我的Angular2應用程序不在典型的瀏覽器內，但實際上包含在ElectronJS應用程序中。我不確定這是否有任何區別。

來源

2016-11-26 docaholic

請問您可以添加'SearchService'服務代碼嗎？ –

代碼似乎是完美的，它應該工作..可能是從API檢索的相關數據沒有正確綁定..在控制檯中的任何錯誤？ –

請更新有問題的響應對象.. –

經過一天的擺弄，我得到了這個問題的答案。

看起來Electron的API不像網絡瀏覽器那樣快速更新，所以我遵循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(); 
    }); 
    }

瞧，一切都正常更新，我有我的搜索結果:)一個不錯的清單。

來源

2016-11-27 06:27:43 docaholic

Angular2 Observable沒有正確綁定

回答

相關問題