我有开始使用角5要构建SHOPING车应用程序API具有离子3工作,但我得到问题,即当欲转换JSON代码形式
"options": [
{
"product_option_id": 218,
"option_value": [
{
"image": null,
"price": 14,
"price_formated": "$14.00",
"price_excluding_tax": 10,
"price_excluding_tax_formated": "$10.00",
"price_prefix": "+",
"product_option_value_id": 5,
"option_value_id": 32,
"name": "Small",
"quantity": 94
},
{
"image": null,
"price": 26,
"price_formated": "$26.00",
"price_excluding_tax": 20,
"price_excluding_tax_formated": "$20.00",
"price_prefix": "+",
"product_option_value_id": 6,
"option_value_id": 31,
"name": "Medium",
"quantity": 144
},
{
"image": null,
"price": 38,
"price_formated": "$38.00",
"price_excluding_tax": 30,
"price_excluding_tax_formated": "$30.00",
"price_prefix": "+",
"product_option_value_id": 7,
"option_value_id": 43,
"name": "Large",
"quantity": 300
}
],
"option_id": 1,
"name": "Radio",
"type": "radio",
"value": "",
"required": "1"
},
{
"product_option_id": 223,
"option_value": [
{
"image": null,
"price": 14,
"price_formated": "$14.00",
"price_excluding_tax": 10,
"price_excluding_tax_formated": "$10.00",
"price_prefix": "+",
"product_option_value_id": 8,
"option_value_id": 23,
"name": "Checkbox 1",
"quantity": 48
},
{
"image": null,
"price": 26,
"price_formated": "$26.00",
"price_excluding_tax": 20,
"price_excluding_tax_formated": "$20.00",
"price_prefix": "+",
"product_option_value_id": 9,
"option_value_id": 24,
"name": "Checkbox 2",
"quantity": 192
},
{
"image": null,
"price": 38,
"price_formated": "$38.00",
"price_excluding_tax": 30,
"price_excluding_tax_formated": "$30.00",
"price_prefix": "+",
"product_option_value_id": 10,
"option_value_id": 44,
"name": "Checkbox 3",
"quantity": 2694
},
{
"image": null,
"price": 50,
"price_formated": "$50.00",
"price_excluding_tax": 40,
"price_excluding_tax_formated": "$40.00",
"price_prefix": "+",
"product_option_value_id": 11,
"option_value_id": 45,
"name": "Checkbox 4",
"quantity": 3998
}
],
"option_id": 2,
"name": "Checkbox",
"type": "checkbox",
"value": "",
"required": "1"
},
{
"product_option_id": 208,
"option_value": [],
"option_id": 4,
"name": "Text",
"type": "text",
"value": "test",
"required": "1"
},
{
"product_option_id": 217,
"option_value": [
{
"image": null,
"price": 6.8,
"price_formated": "$6.80",
"price_excluding_tax": 4,
"price_excluding_tax_formated": "$4.00",
"price_prefix": "+",
"product_option_value_id": 4,
"option_value_id": 39,
"name": "Red",
"quantity": 92
},
{
"image": null,
"price": 5.6,
"price_formated": "$5.60",
"price_excluding_tax": 3,
"price_excluding_tax_formated": "$3.00",
"price_prefix": "+",
"product_option_value_id": 3,
"option_value_id": 40,
"name": "Blue",
"quantity": 300
},
{
"image": null,
"price": 3.2,
"price_formated": "$3.20",
"price_excluding_tax": 1,
"price_excluding_tax_formated": "$1.00",
"price_prefix": "+",
"product_option_value_id": 1,
"option_value_id": 41,
"name": "Green",
"quantity": 100
},
{
"image": null,
"price": 4.4,
"price_formated": "$4.40",
"price_excluding_tax": 2,
"price_excluding_tax_formated": "$2.00",
"price_prefix": "+",
"product_option_value_id": 2,
"option_value_id": 42,
"name": "Yellow",
"quantity": 200
}
],
"option_id": 5,
"name": "Select",
"type": "select",
"value": "",
"required": "1"
},
{
"product_option_id": 209,
"option_value": [],
"option_id": 6,
"name": "Textarea",
"type": "textarea",
"value": "",
"required": "1"
},
{
"product_option_id": 222,
"option_value": [],
"option_id": 7,
"name": "File",
"type": "file",
"value": "",
"required": "1"
},
{
"product_option_id": 219,
"option_value": [],
"option_id": 8,
"name": "Date",
"type": "date",
"value": "2011-02-20",
"required": "1"
},
{
"product_option_id": 221,
"option_value": [],
"option_id": 9,
"name": "Time",
"type": "time",
"value": "22:25",
"required": "1"
},
{
"product_option_id": 220,
"option_value": [],
"option_id": 10,
"name": "Date & Time",
"type": "datetime",
"value": "2011-02-20 22:25",
"required": "1"
}
],
我试图做到这一点,但我觉得这是一个愚蠢的代码
<form (ngSubmit)="submitFormCart()">
<ion-card-content>
<div *ngFor="let opt of product.options">
<ion-list *ngIf="opt.type == 'radio'">
<p [innerHTML]="opt.name"></p>
<ion-item *ngFor="let optvalue of opt.option_value">
<ion-avatar *ngIf="optvalue.image" item-start>
<img [src]="optvalue.image" class="">
</ion-avatar>
<ion-label>
<h2>{{optvalue.name}}</h2>
<p *ngIf="optvalue.price > 0" [innerHTML]="optvalue.price_prefix + optvalue.price_formated"></p>
</ion-label>
<ion-radio name="" value="{{optvalue.product_option_value_id}}"></ion-radio>
</ion-item>
<br />
</ion-list>
<ion-list *ngIf="opt.type == 'checkbox'">
<p [innerHTML]="opt.name"></p>
<ion-item *ngFor="let optvalue of opt.option_value">
<ion-avatar *ngIf="optvalue.image" item-start>
<img [src]="optvalue.image" class="">
</ion-avatar>
<ion-label>
<h2>{{optvalue.name}}</h2>
<p *ngIf="optvalue.price > 0" [innerHTML]="optvalue.price_prefix + optvalue.price_formated"></p>
</ion-label>
<ion-checkbox name="test"></ion-checkbox>
</ion-item>
<br />
</ion-list>
<ion-list *ngIf="opt.type == 'text'">
<p [innerHTML]="opt.name"></p>
<ion-item *ngFor="let optvalue of opt.option_value">
<ion-label [innerHTML]="optvalue.name + (optvalue.price_prefix + optvalue.price_formated)"></ion-label>
<ion-input type="text" value=""></ion-input>
</ion-item>
<br />
</ion-list>
<ion-list *ngIf="opt.type == 'textarea'">
<p [innerHTML]="opt.name"></p>
<ion-item *ngFor="let optvalue of opt.option_value">
<ion-label [innerHTML]="optvalue.name"></ion-label>
<ion-textarea type="text" value=""></ion-textarea>
</ion-item>
<br />
</ion-list>
<ion-list *ngIf="opt.type == 'select'">
<ion-item>
<ion-label [innerHTML]="opt.name"></ion-label>
<ion-select name="gaming">
<ion-option *ngFor="let optvalue of opt.option_value" value="{{optvalue.product_option_value_id}}" [innerHTML]="optvalue.name + (optvalue.price_prefix + optvalue.price_formated)"></ion-option>
</ion-select>
</ion-item>
<br />
</ion-list>
</div>
</ion-card-content>
</form>
我也很困惑如何设置ngModel名称并在.ts文件中获取数据
所以我的问题是
谢谢