Angular 2-API請求未返回Observable，錯誤：未定義沒有屬性“ length”

Question

例外：未捕獲（承諾）：錯誤： http：// localhost：3000 / app / search / results / templates / search-results.component.html：88：58中的錯誤，原因是：無法讀取未定義的屬性“ length” 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[]);

}

search-results.component.ts

private _searchResults: ISearchResult[];

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

search-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>

Answer 1

您需要設置private _searchResults: ISearchResult[]; 為空數組，因為在開始時它是未定義的，因為您的請求是異步的，因此該組件無法在尚未定義的內容上調用.length。

應為： private _searchResults: ISearchResult[] = []

Answer 2

在這種情況下，我將對private _searchResults: ISearchSersult[];使用公共private _searchResults: ISearchSersult[]; 。 但是您不需要為其設置值。 但是我很確定模板不能訪問私有變量，因為它永遠不會到達$scope 。 所以像這樣：

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

然后修改模板：

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