Ionic 2中遍历JSON数据实现Hobbies下拉选择功能问询

嘿，我来帮你搞定这个Ionic下拉菜单的绑定需求！你已经搭好了基础的结构，只需要把options里的选项循环渲染到ion-select里就行啦，先给你梳理下完整的实现步骤：

第一步：修正你的JSON数据格式 #

首先你的原始JSON有语法错误，options数组里的对象写法不符合标准格式，修正后的数据应该是这样的（我还把重复的id改成了递增值，避免id冲突）：

[
  { 
    "label": "Hobbies", 
    "datatype": "check", 
    "lookupname": "null", 
    "order": "05", 
    "options": [
      {"id": "01", "value": "Music"},
      {"id": "02", "value": "Sports"},
      {"id": "03", "value": "Travelling"},
      {"id": "04", "value": "Reading"}
    ] 
  }
]

第二步：完成HTML模板代码 #

接下来把你原来的ion-select部分补全，用*ngFor循环遍历当前item的options数组，生成对应的下拉选项：

<ng-template ngFor let-item [ngForOf]="main2">
  <ion-item *ngIf='item.datatype == "check"'>
    <ion-label floating>{{item.label}}</ion-label>
    <!-- 如果需要多选，给ion-select加上multiple属性即可 -->
    <ion-select [(ngModel)]="selectedHobby">
      <!-- 循环渲染每个爱好选项 -->
      <ion-select-option *ngFor="let opt of item.options" [value]="opt.id">
        {{opt.value}}
      </ion-select-option>
    </ion-select>
  </ion-item>
</ng-template>

代码说明： #

• *ngFor="let opt of item.options"：遍历当前Hobbies项的所有选项，动态生成下拉条目
• [value]="opt.id"：把选项的id作为选中值绑定到ngModel（你也可以改成opt.value，完全看你的业务需求）
• {{opt.value}}：在下拉菜单里显示选项的名称，比如Music、Sports这些
• 如果你的需求是多选（因为datatype是"check"，大概率是多选场景），只需要给ion-select加上multiple属性，同时把[(ngModel)]="selectedHobby"改成数组类型，比如[(ngModel)]="selectedHobbies"，这样就能选中多个爱好了。

额外提示： #

确保你的组件类里已经正确定义了main2数组和对应的ngModel变量，比如：

// 组件类中的示例代码
main2 = [
  { 
    label: "Hobbies", 
    datatype: "check", 
    lookupname: "null", 
    order: "05", 
    options: [
      {id: "01", value: "Music"},
      {id: "02", value: "Sports"},
      {id: "03", value: "Travelling"},
      {id: "04", value: "Reading"}
    ] 
  }
];
// 单选场景用这个变量
selectedHobby: string;
// 多选场景用这个数组
selectedHobbies: string[] = [];

这样点击Hobbies的下拉框，就能看到所有爱好选项啦！

内容的提问来源于stack exchange，提问作者Arjun Ramdas