Динамическая форма от JSON в ионном 2 - PullRequest
Новая
       10

Динамическая форма от JSON в ионном 2

0 голосов
/ 08 мая 2018

Мой массив JSON выглядит как 

Array(3)
main2=
[

    0:{label: "Name", datatype: "text", lookupname: "null", order: 01"}

    1: {label: "DOB", datatype: "date", lookupname: "null", order: "02"}

   2: {label: "QRcode", datatype: "qrcode", lookupname: "null", order: "02"}

   3: {label: "Image", datatype: "image", lookupname: "null", order: "02"}

  ]

Я попытался сгенерировать форму ввода в соответствии с типом данных. Но я не могу включить кнопку внутри цикла, Нет HTML-тегов, работающих внутри цикла, только теги типа ionЧто-то работает. Как добавить кнопку, когда тип данных является штрих-кодом или QR-код внутри цикла

Мой HTML на ионном 

    <form>
          <ion-item *ngFor="let item of main2">
          <ion-label fixed>{{item.label}} : </ion-label>
          <ion-input type="text"  name="title" *ngIf='item.datatype == "text"'></ion-input>
          <ion-input type="text" *ngIf='item.datatype == "radio"'>Checkbox 1</ion-input>
          <ion-input type="number" *ngIf='item.datatype == "number"'></ion-input>
          <ion-datetime displayFormat="MMMM/DD/YYYY" *ngIf='item.datatype == "date"'></ion-datetime>
          <ion-input type="file"  name="title" *ngIf='item.datatype == "image"'></ion-input>
          <ion-datetime displayFormat="HH:mm" *ngIf='item.datatype == "time"'></ion-datetime>
          <ion-input type="number" *ngIf='item.datatype == "number"'></ion-input>

          <ion-input type="text"  *ngIf='item.datatype == "qrcode"' ></ion-input>
          <ion-input type="text"   *ngIf='item.datatype == "barcode"'></ion-input>

</form>

1 Ответ

0 голосов
/ 08 мая 2018

  1. В вашем массиве JSON отсутствует поле для заказа:

    0:{label: "Name", datatype: "text", lookupname: "null", order: 01"}

  2. В вашем html отсутствует закрывающий тег для <ion-item>

  3. Чтобы добавить кнопки:

(опция A) Кнопка в ion-item: вы должны использовать определенный синтаксис item-left или item-right (https://ionicframework.com/docs/2.3.0/api/components/item/Item/)

(Вариант B) Ионный элемент в виде кнопки: вы можете сделать ионный элемент в качестве кнопки

HTML 

<ion-content>
  <form *ngFor="let item of main2">
    <ion-item>
      <ion-label fixed>{{item.label}} : </ion-label>
      ...
      //Option A
      <button ion-button item-right *ngIf='item.datatype == "qrcode"'>Btn</button>
    </ion-item>

    //Option B
    <button ion-item *ngIf='item.datatype == "qrcode"' (click)="test()">{{item.label}} Button</button>
  </form>
</ion-content>
...