свойство «фильтр» не определено при производстве, но отлично работает на местном уровне

Question

Я работаю с угловым 2 передним концом, который потребляет API для отдыха от весеннего ботинка. В угловом проекте у меня есть файл 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'; }} 

если я указан сервер на локальный хост, и потребить 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: Не удается прочитать свойство 'фильтр' неопределенных (...)

Это странно, потому что я могу использовать 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 }}

вся помощь будет очень уважаема. спасибо

Answer 1

Я понимаю, почему это происходит, потому что для получения данных из удаленного API требуется время для завершения. Я пытался подождать некоторое время, прежде чем получить доступ к API, а затем все работает, как оно использует.