私はを使用して、選択リストから適切なものを検索して見つけるために項目のリストを表示しています。私が直面している問題は、それが静的データに対してのみ働くことです。私のデータは、RESTful Webサービスからロードされます。私は複数のハックやトリックを試みましたが、Webサービスからng2-selectにデータをロードできません。このプラグインはWebサービスデータの読み込みをサポートしていないようです。 ng2-selectにWebサービスデータをロードするためのハックはありますか?角度2選択 - Webサービスからデータを読み込む問題
ウェブサービスからデータを読み込み可能な他のangular2プラグインを提案して、ユーザーが検索して選択できるようにしてください。
更新:
私は私が成功した私のWebサービスからデータを取得していますことを言及して逃しました。 Webサービスからデータを取得する際に問題はありません。問題はng2-selectです。 items
配列に、Webサービスから取り出したデータを(コンソール上の印刷されたアイテムの配列で確認されている)配置することに成功しましたが、ng2-selectは何も表示しません。 Webサービスからデータを取得せず、ローカルデータ(初期化時に割り当てられている)だけを配列に取り込むと、ローカルデータが表示され、表示されます。
それはちょうど要求で動作するようです。ここでコメント
製品-Category.service.ts
import { Injectable } from '@angular/core';
import { Http} from '@angular/http';
import {Observable} from "rxjs";
@Injectable()
export class ProductCategoryService
{
apiUrl: string = "http://jsonplaceholder.typicode.com/users";
constructor(private http : Http){}
public getUserData(): Observable<any> {
return this.http.get(this.apiUrl)
.map(result => {
return result.json();
});
}
}
製品-category.component.ts
import { Component, OnInit , ViewChild , AfterViewInit , ElementRef } from '@angular/core';
import { Http, Headers , Response , RequestOptions } from "@angular/http";
import { Observable } from 'rxjs/Rx';
@Component({
selector: 'product-category',
templateUrl: 'product-category.component.html',
styles: []
})
export class AddProductCategoryComponent implements OnInit
{
public items = [];
my :boolean= false;
constructor(public productCategoryService:ProductCategoryService){}
ngOnInit()
{
this.getItems();
}
getItems()
{
this.productCategoryService.getUserData().subscribe(
items => this.items
);
}
アップデート2からのサンプルコードです:は 簡単にするために、私は理解しやすくするためにコードと画像を添付しました。コードとイメージでは、サーバーから応答が返ってきたことがわかります。結果はコンソールに表示されます。しかし、簡単にするために、配列に手動でエントリを追加することができます。 ng2-select
には、要求を送信する前に移入されたデータのみが表示されていますが、サーバーに応答を返した後に移入されたオブジェクトも配列に含まれています。そのため
コード
public items: any = [];
ngOnInit()
{
this.items.push({id : 1 , text : 'Option1'});
this.getItems();
console.log(this.items);
}
getItems()
{
this.productCategoryService.getUserData().subscribe(
success =>
{
this.items.push({id : 2 , text : 'Option2'});
console.log(success);
}
);
}
は、あなたがウェブからデータを取得するには問題はありませんでしたコード –
を追加することができます。このようなコンポーネントのクラスでそのサービスを呼び出すよりも
サービス。私はまだあなたのコードをテストし、ng2-selectは何も表示していません。 – usmanwalana