有没有什么办法离子动态表单Opencart的选择吗?

时间:2019-02-02 13:13:17

标签: angular forms ionic-framework ionic3 opencart

我有开始使用角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文件中获取数据

所以我的问题是

  1. :如何将json代码“ Options”转换为
  2. :我怎样才能设置ngModel的名字哪里是
    • product_option_id =输入名称
    • option_value [X] .product_option_value_id =输入值

谢谢

0 个答案:

没有答案