0
私はスプリングブートから休止APIを消費するアングル2フロントエンドで作業しています。角度のあるプロジェクトでは、すべてのコンポーネントがアクセスできるグローバルな開発変数を含むファイルglobals.tsを持っています。私のフロントエンドでは、Rest API上でデータベースを検索するコンポーネントがあります（ローカルまたはリモートAPIはglobal.tsに依存することができます）。プロダクションでは 'filter'プロパティは未定義ですが、ローカルでは正常に動作します
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の、それは私の地元の春のアプリケーションから実行する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キャッチされない例外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 }}
すべての援助は非常に尊敬されます。ありがとう