Angular 2 Select - Load data from web service trouble
<p>I am using <a href="https://github.com/valor-software/ng2-select" rel="nofollow noreferrer">ng2-select</a> to display a list of items so that user can search and find the appropriate one from select list. The problem I am facing is that it only works on static data. My data is loaded from RESTful webservice. I have tried multiple hacks and tricks but I am unable to load data from web service into ng2-select. It appears that this plugin does not support loading web service data. 
Is there a working hack to load webservice data into ng2-select ?</p>

<p>If not please suggest an other angular2 plugin which can load data from web service and enables user to search and select. </p>

<p><strong>Update :</strong>
<br>
I missed to mention that i am successfully getting data from my web service. There is no issue in getting data from web service. The problem is with ng2-select. I successfully populate the <code>items</code> array with the fetched data from web service(confirmed by printed items array on console) but ng2-select does not show anything. If I do not fetch data from web service and only populate the array with local data(which is assigned at the time of initializing), it works and displays local data.<br>
<strong>It Just cant seem to work with requests. Here is an example code from a comment</strong></p>

<p><strong>Product-Category.service.ts</strong></p>

<pre><code>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&lt;any&gt; {
        return this.http.get(this.apiUrl)
            .map(result =&gt; {
                return result.json();
            });
    }
}
</code></pre>

<p><strong>Product-category.component.ts</strong></p>

<pre><code>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 =&gt; this.items
    );
    }
</code></pre>

<p><strong>Update2:</strong>
For simplicity i have attached a code and an image to better understand. You can see in the code and image that after getting a response back from the server. The result can be seen in the console. But for simplicity lets add an entry in the array manually. You can see that <code>ng2-select</code> only displays the data which was populated before sending the request, but the array also contains the object which was populated after getting response back from the server.
<br>
<strong>Code</strong></p>

<pre><code>public items: any = [];
ngOnInit()
    {
        this.items.push({id : 1 , text : 'Option1'});
        this.getItems();
        console.log(this.items);
    }
    getItems()
    {
        this.productCategoryService.getUserData().subscribe(
            success =&gt;
            {
                this.items.push({id : 2 , text : 'Option2'});
                console.log(success);
            }
    );
    }
</code></pre>

<p><strong>Image</strong>
<a href="https://i.stack.imgur.com/0MzRX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0MzRX.png" alt="ng2-select"></a></p>