javascript - Angular 2 - API 请求未返回 Observable,错误 : undefined has no property 'length'

标签 javascript angular typescript

异常:未捕获( promise ):错误:http://localhost:3000/app/search/results/templates/search-results.component.html:88:58 中出现错误原因:无法读取未定义的属性“长度” 类型错误:无法读取未定义的属性“长度”

所以,问题是 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>

最佳答案

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

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

关于javascript - Angular 2 - API 请求未返回 Observable,错误 : undefined has no property 'length' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40953654/

相关文章:

javascript - 从按钮单击调用 jquery facbox

javascript - 使用 JQuery 浏览按钮

javascript - 浏览器列表错误 : Unknown version 67 of android

javascript - Angular Reactive Forms - 排除表单提交上的空白字段

typescript - 使用 React Intl 和 Typescript 检查消息是否为空

javascript - ChromeDriver 支持在缩放不是 100% 时点击

angular - Ionic 4 - 键盘向上推内容

javascript - iOS 上的 PWA 在单击共享按钮时导航到空白屏幕

Angular 模块从 es6 到 commonJs 结果

html - 如何创建带虚线边框的圆形 svg 进度条