离子2中JSON的动态形式

时间:2018-05-08 04:47:38

标签: javascript angular ionic-framework ionic2

我的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标签只能像离子一样工作。喜欢在数据类型为时添加按钮循环中的条形码或qr代码

我的HTML on ionic

    <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 :(得分:1)

  1. 您的JSON数组缺少&#34;对于订单字段:

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

  2. 您的html缺少<ion-item>

  3. 的结束标记
  4. 添加按钮:

  5. (选项A)离子项中的按钮:您必须使用特定语法item-leftitem-righthttps://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>