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

时间:2017-10-01 17:10:22

标签: angular ionic-framework ionic2

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

这是我的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>

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

1 个答案:

答案 0 :(得分:0)

您将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函数已经为你做了。