在 Ionic 3 Angular 4 中将 json 对象与下拉列表集成

Question

我一直在尝试将 json 响应集成到 ion-option 标签中。这是我的 html 代码：

<ion-item>
          <ion-label>Country</ion-label>
                  <ion-select formControlName="country">
                    <ion-option *ngFor="let value of values">{{value}}</ion-option>
                  </ion-select>
                </ion-item>

我的值 json 对象如下所示：

values = {4: "Afghanistan", 8: "Albania", 10: "Antarctica", 12: "Algeria"};

这是在上述html文件的相关class中定义的。

我收到以下错误：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

有人能告诉我我做错了什么吗？ JSON对象的格式不支持吗？

提前致谢！

Answer 1

你的值是一个对象，它应该是一个数组，如下所示，

values = [{"Afghanistan", "Albania","Antarctica", "Algeria"}];

您可以将对象转换为数组，如下所示，

var obj = {4: "Afghanistan", 8: "Albania", 10: "Antarctica", 12: "Algeria"}; 
var result = Object.keys(obj).map(function(key) {
  return  obj[key];
});

console.log(result);

Answer 2

与@Sajeetharan 的回答略有不同。如果您的数据在数组中就足够了，因为 JSON 不能直接迭代 ngFor

values = {
            data: [
                {id: "4", value: "Afghanistan"},
                {id: "8", value: "Albania"},
                {id: "10", value: "Antarctica"},
                {id: "12", value: "Algeria"},
            ]
        };

然后你可以做

<ion-option *ngFor="let val of values.data">{{val.id}}----{{val.value}}</ion-option>

Answer 3

您好，我实际上使用了其中一个答案中提供的功能：回答者：Ankit Singh

他提到了函数的使用：

generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}

它将我的 json 对象转换为数组！

在 Ionic 3 Angular 4 中将 json 对象与下拉列表集成

Integrate json object with dropdown in Ionic 3 Angular 4

ionic2

ionic3

angular

ion-select