Угловой 2 Выберите - Загрузить данные из проблемы веб-службы

Question

Я использую ng2-select, чтобы отобразить список элементов, чтобы пользователь мог найти и найти подходящий из списка выбора. Проблема, с которой я сталкиваюсь, заключается в том, что она работает только с статическими данными. Мои данные загружаются из веб-сервиса RESTful. Я пробовал несколько хаков и трюков, но я не могу загрузить данные из веб-службы в ng2-select. Похоже, что этот плагин не поддерживает загрузку данных веб-сервиса. Есть ли рабочий хак для загрузки данных webservice в ng2-select?

Если нет, предложите другой плагин angular2, который может загружать данные из веб-службы и позволяет пользователю выполнять поиск и выбор.

Update:
я пропустил упомянуть, что я успешно получать данные из моего веб-службы. Нет никакой проблемы с получением данных из веб-службы. Проблема заключается в выборе ng2. Я успешно заполняю массив items полученными данными из веб-службы (подтвержденный массивом печатных элементов на консоли), но ng2-select ничего не показывает. Если я не получаю данные из веб-службы и заполняю массив только локальными данными (которые назначаются во время инициализации), он работает и отображает локальные данные.
Это просто невозможно работать с запросами. Ниже приведен пример кода из комментария

Продукт-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 
    ); 
    } 

Update2: Для простоты я добавил код и изображение, чтобы лучше понять. Вы можете увидеть в коде и изображении, что после получения ответа с сервера. Результат можно увидеть в консоли. Но для простоты можно добавить запись в массив вручную. Вы можете видеть, что 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); 
      } 
    ); 
    } 

Изображение

Answer 1

для этого вы можете создать сервис, который извлекает данные с сервера

@Injectable() 
export class UserService { 
    apiUrl: string = "http://jsonplaceholder.typicode.com/users"; 

    constructor(private http: Http) { 
    } 


    //getUserData(): Observable<any> { 

    //return this.http.get(this.apiUrl) 
    // .map(result => { 
    // return result.json(); 
    // }); 
    //} 
    // just for testing use this mechanisum if it working for you or not 
    getUserData(): Promise<any[]> { 
     return Promise.resolve(ITEMS); 
    } 


} 

public ITEMS:Array<string> = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona', 
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest', 
'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 
'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', 
'Hamburg', 'Hannover', 'Helsinki', 'Kraków', 'Leeds', 'Leipzig', 'Lisbon', 
'London', 'Madrid', 'Manchester', 'Marseille', 'Milan', 'Munich', 'Málaga', 
'Naples', 'Palermo', 'Paris', 'Poznań', 'Prague', 'Riga', 'Rome', 
'Rotterdam', 'Seville', 'Sheffield', 'Sofia', 'Stockholm', 'Stuttgart', 
'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław', 
'Zagreb', 'Zaragoza', 'Łódź']; 

попробуйте этот код, и вы получите 10 пользователей данные. это основной способ, вы можете позвонить в любой GET api в Angular 2.

Добавить эту службу в @NgModule в ap.module.TS файл:

@NgModule({ 
    providers: [UserService] 
}) 

чем вызвать этот сервис в классе компонентов, как это:

items = []; 


constructor(private userService: UserService){} 

onNgInit(){ 
    this.getItems(); 
} 

getItems() { 
    //this.userService.getUserData().subscribe(
    // items => this.items; 
    //); 
    this.userService.getUserData().then(results=> this.items = results); 
} 



<ng-select [allowClear]="true" 
       [items]="items" // here that items will come, but it will be object, i hope in your service you will get Array[] items. 
       [disabled]="disabled" 
       (data)="refreshValue($event)" 
       (selected)="selected($event)" 
       (removed)="removed($event)" 
       (typed)="typed($event)" 
       placeholder="No city selected"> 
    </ng-select>