在生产中未定义的属性“过滤器”，但在本地工作正常答案

【问题标题】：property 'filter' of undefined when in production, but works fine in local在生产中未定义的属性“过滤器”，但在本地工作正常
【发布时间】：2016-11-21 10:40:31
【问题描述】：

我正在使用 Angular 2 前端，它使用 Spring Boot 中的 rest API。在 Angular 项目中，我有文件 globals.ts，其中包含所有组件都可以访问的全局开发变量。在我的前端，我有组件来搜索基于 Rest API 的数据库（可以是本地或远程 API，取决于 global.ts）。

globals.ts

export class Globals {
//localhost or 21.222.54.400:8090
public static get server(): string { return 'http://21.222.54.400:8090'; }}

如果我将服务器指定为 localhost 并且它使用从我的本地 spring 应用程序运行的 API，它工作正常。但如果我将其更改为远程 API，它会返回：

error_handler.js:51 TypeError: Cannot read property 'filter' of undefined
at SearchPipe.transform (search.pipe.ts:11)
at view_utils.js:159
at _View_SearchpopupComponent0.detectChangesInternal (SearchpopupComponent.ngfactory.js:96)
at _View_SearchpopupComponent0.AppView.detectChanges (view.js:272)
at _View_MidrouteComponent0.AppView.detectViewChildrenChanges (view.js:298)
at _View_MidrouteComponent0.detectChangesInternal (MidrouteComponent.ngfactory.js:85)
at _View_MidrouteComponent0.AppView.detectChanges (view.js:272)
at _View_MidrouteComponent_Host0.AppView.detectViewChildrenChanges (view.js:298)
at _View_MidrouteComponent_Host0.AppView.detectChangesInternal (view.js:283)
at _View_MidrouteComponent_Host0.AppView.detectChanges (view.js:272)ErrorHandler.handleError @ error_handler.js:51

zone.js:140 Uncaught TypeError: Cannot read property 'filter' of undefined(...)

这很奇怪，因为我可以使用 rest API 来处理另一个重要的问题，除了管道。

这是我的 search.pipe.ts ：

    import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {

  transform(service: any, term: any): any {
    if (term=== undefined) return null;

    return  service.filter(function(service){
      return  service.product_name.toLowerCase().includes(term.toLowerCase());
    })
  }

}

这是我的 search.service.ts ：

    import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import { Home }           from '../home/home';
import { Observable }     from 'rxjs/Observable';
import 'rxjs/Rx';
import {Globals} from "../globals";

@Injectable()
export class SearchService {
    constructor (private http: Http) {}

    private Url = Globals.server+'/product?size=2000';  // URL to web API

    getService (){
        return this.http.get(this.Url)
            .map(res => <Home[]> res.json())
            .catch(this.handleError);
    }
    private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
    }
    private handleError (error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        console.error(errMsg); // log to console instead
        return Observable.throw(errMsg);
    }
}

在我的组件中，我调用了这个方法：

  getHomes() {
    this.homeService.getService()
        .subscribe(
            services => this.services = services.content,
            error =>  this.errorMessage = <any>error);
  }

在模板中我打电话给{{ service.product_name }}

所有的帮助都将受到高度尊重。谢谢

【问题讨论】：

标签： javascript angularjs spring rest api

【解决方案1】：

我明白为什么会发生这种情况，因为从远程 API 获取数据需要时间来完成。我尝试在访问 API 之前等待一段时间，然后一切都像以前一样运行。

【讨论】：