Angular 2 - API请求不返回Observable,错误:undefined没有属性'length'

时间:2016-12-03 23:25:11

标签: javascript angular typescript

EXCEPTION:未捕获(在承诺中):错误:http://localhost:3000/app/search/results/templates/search-results.component.html:88:58中的错误导致:无法读取未定义的属性“长度” TypeError:无法读取未定义的属性“length”

所以,交易是POST方法似乎工作得很好。 do()记录来自服务器的正确预期响应,但在SearchService中的getSearchResults()实现和SearchResultsComponent中的函数调用之间的某个地方失败了。 _searchResults永远不会更新为任何值。

search.service.ts

    getSearchResults(numberOfResults: number, offset: number, sortProperties?: ISort): Observable<ISearchResult[]>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let searchParams = localStorage.getItem("savedSearchParameters");

    return this._http.post(this._baseUrl + "customer", searchParams, options)
        .do(r => console.log(r))
        .map((r: Response) => r.json().data as ISearchResult[]);

}

搜索-results.component.ts

private _searchResults: ISearchResult[];

        this._searchService.getSearchResults(this.numResultsToFetch(), this._resultOffset)
        .subscribe((data: ISearchResult[]) => this._searchResults = data);

搜索-results.template.html

                <results-table
                    *ngIf="_searchResults.length > 0"
                    (sortEvent)="onSort($event)"
                    [resultsPerPage]="_resultSettings.resultsPerPage"
                    [pageNumber]="_pageNumber"
                    [resultOffset]="_resultOffset"
                    [columnMapping]="_columnMapping"
                    [totalPages]="_totalPages"
                    [columnsToBeDisplayed]="_resultSettings.columnsToBeDisplayed"
                    [displayData]="_searchResults"></results-table>

2 个答案:

答案 0 :(得分:2)

您需要将private _searchResults: ISearchResult[];设置为空数组,因为它在开始时未定义,因为您的请求是异步的,因此组件无法在尚未定义的内容上调用.length。

应该是:private _searchResults: ISearchResult[] = []

答案 1 :(得分:0)

在这种情况下,我会使用private _searchResults: ISearchSersult[];的公共getter。但是您不需要为它设置值。但我很确定模板无法访问私有变量,因为它永远不会访问$scope。 所以像这样:

public get searchResults():ISearchResult[]{
    return this._searchResults;
}

然后修改模板:

<results-table
   *ngIf="searchResults.length > 0"