如何使用ionic 2＆amp; amp ;;将动态值绑定到下拉列表角

Question

您好，我只想尝试将动态值绑定到下拉列表，但我很困惑如何绑定它。

这是我的json数据

    [
  {
    "Name": "data1",  
    "sno": 3

  },
  {
    "Name": "data2",  
    "sno": 4
  },
  {
    "Name": "data3",  
    "sno": 5
  }

这里我使用提供商调用我的动态数据

dropDown(){
var url1 ='http://xxxxx.xxxx.xxxx.xxx/info/Service1.svc/getData';
return this.http.get(url1).map(result=>{
  return result.json();
})

之后我通过在构造函数中调用它然后使用ngOnIt初始化它来在页面中调用它

selectedValue: number;
  optionsList: Array<{ value: number, text: string}> = [];

在构造函数中声明之后

`ngOnInit(){



    this.optionsList = this.serv.dropDown().subscribe( response =>{

      console.log(response.json());

    });

  }`


 <ion-select>
    <ion-option *ngFor="let item of optionsList" value="{{item.value}}">{{item.text}}</ion-option>
  </ion-select>

但是因为订阅无法分配以及如何获取所选值和文字而导致错误？

Answer 1

您将subscribe的返回值（ Observable ）分配给this.optionsList，从而导致错误。 有两种方法可以解决这个问题：

1-您可以将异步管道用于 * ngFor ：

<ion-select>
    <ion-option *ngFor="let item of optionsList | async" value="{{item.value}}">
    {{item.text}}</ion-option>
</ion-select>

同时删除subscribe中的回调：

ngOnInit(){
    this.optionsList = this.serv.dropDown().subscribe();
}

2-分配属性optionsList：

ngOnInit(){
    this.serv.dropDown().subscribe( response =>{
      this.optionsList = response;
    });

}

请注意，我删除了.json（）函数，因为map函数已经为你做了。