在 Ionic 2 中遍历 JSON 数据答案

【问题标题】：Iteration through JSON data in Ionic 2在 Ionic 2 中遍历 JSON 数据
【发布时间】：2018-10-18 07:31:33
【问题描述】：

My JSON array look like this

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

 }]

点击带有选项值的爱好时我想要一个下拉菜单

我的 HTML 代码

 <ng-template ngFor let-item [ngForOf]="main2">
       <ion-item *ngIf='item.datatype == "check"' >
         <ion-label floating>{{item.label}}</ion-label>
                <ion-select>
                    <ion-option>{{item.options.value}}</ion-option>
                </ion-select>    
       </ion-item>
  </ng-template>

注意：main2 是我的主数组，其中包含很多对象

点击时如何遍历选项（爱好）以获取值（选项）作为下拉列表

【问题讨论】：

options 是数组还是对象？你使用[...]，然后给每个条目一个id 0:
Angular2 nested ngFor的可能重复
options 是一个数组

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

将*ngFor="let opt of item.options" 用于ion-option

我在stackblitz 上创建了一个演示。我希望这会对您/其他人有所帮助/指导。

HTML 代码

<ion-content padding>
 <ng-template ngFor let-item [ngForOf]="main2">
       <ion-item *ngIf='item.datatype == "check"' >
         <ion-label floating>{{item.label}}</ion-label>
                <ion-select>
                    <ion-option *ngFor="let opt of item.options" [value]="opt.value">{{opt.value}}</ion-option>
                </ion-select>    
       </ion-item>
  </ng-template>
</ion-content>

【讨论】：