Question

我正在使用ng2-select来显示项目列表，以便用户可以从选择列表中搜索并找到合适的项目。我面临的问题是它只适用于静态数据。我的数据是从RESTful webservice加载的。我尝试了多种黑客和技巧，但我无法将数据从Web服务加载到ng2-select。看来这个插件不支持加载Web服务数据。是否有工作黑客将web服务数据加载到ng2-select？

如果没有，请建议另一个angular2插件，它可以从Web服务加载数据，并允许用户搜索和选择。

更新
我错过了提到我成功从我的网络服务获取数据。从Web服务获取数据没有问题。问题出在ng2-select上。我成功地使用来自Web服务的已获取数据填充items数组（由控制台上的打印项目数组确认），但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
    );
    }

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个用户数据。这是基本的方法，你可以在Angular 2中调用任何GET api。

将此服务添加到ap.module.ts 文件中的 @NgModule：

@NgModule({ providers: [UserService] })

比在Component类中调用该服务：

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>

Angular 2 Select - 从Web服务加载数据出现问题

1 个答案: