Question

我们如何使用动态值（离子选项）制作<ion-select >（离子v2）。

vaules应该是来自json对象的标记，如下所示。

    {  
   "direction":[  
      {  
         "idd":"1",
         "villedepart":"kasserine",
         "villearrive":"sfax",
         "ligne_direction":"kasserine sfax"
      },
      {  
         "idd":"6",
         "villedepart":"sousse",
         "villearrive":"tunis",
         "ligne_direction":"sousse tunis"
      },
      {  
         "idd":"9",
         "villedepart":"nabeul",
         "villearrive":"sousse",
         "ligne_direction":"nabeul sousse"
      }
   ],
   "success":1
}

Answer 1

这可以简单地通过将json存储在变量中来完成，例如values。然后，您遍历values.direction并显示所需的属性，此处为villedepart：

<ion-item>
  <ion-label>Values</ion-label>
  <ion-select [(ngModel)]="selectedValue">
    <ion-option *ngFor="let val of values.direction">{{val.villedepart}}</ion-option>
  </ion-select>
</ion-item>

Plunker

检查this link是否有离子选择。

您可以选择直接从响应中获取数据，这意味着您可以直接迭代值：

服务：

getData() {
  return this.http.get('url')
    .map(res => res.json().direction) // this here!
}

组件：

this.myService.getData()
  .subscribe(data => {
     this.values = data;
  });

然后迭代：

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

使用动态值设置离子选项

1 个答案: