您好,我只想尝试将动态值绑定到下拉列表,但我很困惑如何绑定它。
这是我的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>
但是因为订阅无法分配以及如何获取所选值和文字而导致错误?
答案 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函数已经为你做了。