迭代 Ionic 2 中的 JSON 数据
Iteration through JSON data in Ionic 2
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 是我的主数组,其中包含很多对象
如何遍历选项(爱好)以在单击时将值(选项)作为下拉列表
对 ion-option
使用 *ngFor="let opt of item.options"
我在 stackblitz 上创建了一个演示。
我希望这会 help/guide 到 you/others。
HTML Code
<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>
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 是我的主数组,其中包含很多对象
如何遍历选项(爱好)以在单击时将值(选项)作为下拉列表
对 ion-option
*ngFor="let opt of item.options"
我在 stackblitz 上创建了一个演示。 我希望这会 help/guide 到 you/others。
HTML Code
<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>