1
新しいウェブデベロッパーはこちらです（事前に申し訳ありません）。 Angular2でプロトタイプの在庫ページを作成するように求められました。Angular2 APIで表示されない呼び出しを呼び出す
以下のコードで確認します。 EXAMPLEapi.serviceページから始めて、基本バックエンドAPI（ 'https://api.EXAMPLE.com/api/v1/inventory？'）を呼び出して、EXAMPLEapi.componentのngOnInitに渡して、初期在庫をページに読み込みます。
ここからは、さまざまなフィルタリング値（最小/最大年、Milage、色など）を選択できる必要があります。これらの値はフォーム（EXAMPLEapi.component.html）からrefreshInv（）関数（EXAMPLEapi.component）に渡され、最終的にAPI呼び出しに戻される前にURLSearchParamsを使用して値をparamsに変換します。
APIは、ベースURLの最後に 'min_price ='を追加するだけで、それに応じて在庫呼び出しに反映されるように構築されています。
問題は次のとおりです。onSubmitが通過するフィルタリング値を通過すると、正常にステータス200のネットワークコールを正常に取得できます。残念ながら、在庫はページに戻っていません。それは空白です。
EXAMPLEAPI.service.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class EXAMPLEAPIService {
constructor(public http: Http){}
baseUrl = "https://api.EXAMPLE.com/api/v1/inventory?";
getVehicles(params) {
return this.http.get(this.baseUrl, params)
.map(res => res.json());
}
click(): Observable<Data[]> {
console.log(value);
}
log(x) {
console.log(x);
}
EXAMPLE.component.ts
import {Component, OnInit} from 'angular2/core';
import {Http, RequestOptions, URLSearchParams, HTTP_PROVIDERS} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import {EXAMPLEService} from './EXAMPLEapi.service';
import {FormsModule} from 'angular2/forms';
@Component({
selector: 'example-container',
styles: [`
* {
display: inline-block;
max-width: 500px;
vertical-align: top;
}
.invbar {
border: 1px solid black;
padding: 5px;
background-color: #6A7372;
border-radius: 15px;
}
.hotel_container{
border: 1px solid black;
background-color: #6A7372;
max-height: 410px;
}
#colorsBox{
display: block;
}
input[type="checkbox"]{
margin-left: 5px;
}
label{
margin-top: 5px;
color: #FF3B37;
}
`],
templateUrl: 'app/exampleapi.component.html',
providers: [HTTP_PROVIDERS, EXAMPLEAPIService]
})
export class EXAMPLEAPIComponent implements OnInit {
constructor(public EXAMPLEAPIService: EXAMPLEAPIService){
this.minPrice = {
value: ''
};
this.maxPrice = {
value: ''
};
this.minYear = {
value: '2013'
};
this.maxYear = {
value: ''
};
}
// On Page-Load this loads the API Call
ngOnInit() {
this.EXAMPLEService.getVehicles()
.subscribe(data => {
this.vehicles = data.data;
console.log(data.data[0].name);
}
}
// Takes the Filter Parameters and passes them back into the API Call
refreshInv() {
let params = new URLSearchParams();
params.set('min_price', this.minPrice.value);
params.set('max_price', this.maxPrice.value);
params.set('min_year', this.minYear.value);
params.set('max_year', this.maxYear.value);
params.set('ext_color', this.colorsChecked);
let options = new RequestOptions({
search: params
});
console.log(options);
return this.EXAMPLEService.getVehicles(options)
.subscribe(data => this.vehicles = data.data);
}
// Keeps the Filter Queries Actively Refreshing on each interaction
onSubmit(value: any): Observable<Data[]> {
console.log(value);
return this.refreshInv()
};
// Dynamic Checkbox Generation for Color Filters
colors = ['Red', 'Blue', 'Yellow', 'Green', 'White', 'Black'];
colorsMap = {
Red: false,
Blue: false,
Yellow: false,
};
colorsChecked = [];
initColorsMap() {
for (var x=0; x<this.colors.length; x++) {
this.colorsMap[this.colors[x]] = true;
}
}
updateCheckedColors(color, event) {
this.colorsMap[color] = event.target.checked;
}
colorUpdate() {
for(var x in this.colorsMap) {
if(this.colorsMap[x]) {
this.colorsChecked.push[x];
}
}
this.colors = this.colorsChecked;
this.colorsChecked = [];
}
// Dynamic Checkbox Generation for Lift Filters
lifts = ['Lifted', 'Unlifted'];
liftsMap = {
Lifted: false,
Unlifted: false,
};
liftsChecked = [];
initLiftsMap() {
for (var x=0; x<this.lifts.length; x++) {
this.liftsMap[this.maps[x]] = true;
}
}
updateCheckedMaps(map, event) {
this.liftsMap[lift] = event.target.checked;
}
liftUpdate() {
for(var x in this.liftMap) {
if(this.liftMap[x]) {
this.liftsChecked.push[x];
}
}
this.lifts = this.liftsChecked;
this.liftsChecked = [];
}
// Dynamic Checkbox Generation for Transmission Filters
trans = ['Manual', 'Automatic'];
transMap = {
Manual: false,
Automatic: false,
};
transChecked = [];
initTransMap() {
for (var x=0; x<this.trans.length; x++) {
this.transMap[this.trans[x]] = true;
}
}
updateCheckedmap(map, event) {
this.transMap[map] = event.target.checked;
}
transUpdate() {
for(var x in this.transMap) {
if(this.transMap[x]) {
this.transChecked.push[x];
}
}
this.trans = this.transChecked;
this.transChecked = [];
}
// Dynamic Checkbox Generation for Interior Filters
ints = ['Cloth', 'Leather', 'Vinyl'];
intsMap = {
Cloth: false,
Leather: false,
Vinyl: false,
};
intsChecked = [];
initIntMap() {
for (var x=0; x<this.ints.length; x++) {
this.intsMap[this.ints[x]] = true;
}
}
updateCheckedmap(map, event) {
this.intsMap[map] = event.target.checked;
}
intsUpdate() {
for(var x in this.intsMap) {
if(this.intsMap[x]) {
this.intsChecked.push[x];
}
}
this.ints = this.intsChecked;
this.intsChecked = [];
}
}
また、angular2を@angularに更新することもできます。 angle2は古いです。 https://angular.io/docs/ts/latest/guide/npm-packages.html – Knostradamus