jquery chosen - Angular 2 Select - Load data from web service trouble -

i using ng2-select display list of items user can search , find appropriate 1 select list. problem facing works on static data. data loaded restful webservice. have tried multiple hacks , tricks unable load data web service ng2-select. appears plugin not support loading web service data. there working hack load webservice data ng2-select ?

if not please suggest other angular2 plugin can load data web service , enables user search , select.

update :
missed mention getting data web service. there no issue in getting data web service. problem ng2-select. populate items array fetched data web service(confirmed printed items array on console) ng2-select not show anything. if not fetch data web service , populate array local data(which assigned @ time of initializing), works , displays local data.
it cant seem work requests. here example code comment

product-category.service.ts

import { injectable } '@angular/core'; import { http} '@angular/http'; import {observable} "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();             });     } } 

product-category.component.ts

import { component, oninit , viewchild , afterviewinit , elementref } '@angular/core'; import { http, headers , response , requestoptions } "@angular/http";  import { observable } 'rxjs/rx';  @component({     selector: 'product-category',     templateurl: 'product-category.component.html',     styles: [] }) export class addproductcategorycomponent implements oninit {     public items = [];     :boolean= false;     constructor(public productcategoryservice:productcategoryservice){}     ngoninit()     {         this.getitems();     }     getitems()     {         this.productcategoryservice.getuserdata().subscribe(             items => this.items     );     } 

update2: simplicity have attached code , image better understand. can see in code , image after getting response server. result can seen in console. simplicity lets add entry in array manually. can see ng2-select displays data populated before sending request, array contains object populated after getting response server.
code

public items: = []; 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);             }     );     } 

image

for can create service fetches data server

@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();     //  });   //}   // testing use mechanisum if working 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ź']; 

try code , 10 users data. basic way, can call api in angular 2.

add service @ngmodule in ap.module.ts file:

@ngmodule({     providers: [userservice] }) 

than call service in component class this:

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 items come, object, hope in service array[] items.               [disabled]="disabled"               (data)="refreshvalue($event)"               (selected)="selected($event)"               (removed)="removed($event)"               (typed)="typed($event)"               placeholder="no city selected">   </ng-select>