Question

我创建了所有类型的字段，例如离子输入，离子文本区域，离子选择，离子日期时间，离子无线电等。这些字段位于ngFor循环中，因此每种类型的字段可以超过一次，并且在检查* ngIf条件后，我已经显示了这些字段。所有这些都工作正常。

现在，我在获取所有这些字段值时面临的问题。如何获得所有字段的值。

这是我正在使用的代码：在TypeScript中：

let fieldArray = [
    {
        filedType: 'RadioButton'
    },
    {
        filedType: 'Select'
    },
    {
        filedType: 'Radio'
    },
    {
        filedType: 'TextArea'
    },
    {
        filedType: 'Input'
    },
    {
        filedType: 'Radio'
    },
    {
        filedType: 'TextArea'
    },
    {
        filedType: 'Input'
    },
    {
        filedType: 'Image'
    }
];

在HTML中：

<ion-list *ngFor="let el of this.fieldArray">

    <ion-row *ngIf="el.filedType == 'RadioButton'">
        <ion-item>
          <ion-toggle></ion-toggle>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Input'">
        <ion-item>
          <ion-input type="text" placeholder="Enter text"></ion-input>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Radio'">
        <ion-item>
          <ion-radio></ion-radio>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'TextArea'">
        <ion-item>
         <ion-textarea placeholder="Enter a description"></ion-textarea>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Image'">
        <ion-item>
         <img [src]="el.src ? el.src : 'assets/imgs/default.png'" />
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Date'">
        <ion-item>
         <ion-input type="date"></ion-input>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Time'">
        <ion-item>
         <ion-input type="time"></ion-input>
        </ion-item>
    </ion-row>

    <ion-row *ngIf="el.filedType == 'Select'">
        <ion-item>
         <ion-select>
            <ion-option value="option 1">Option 1</ion-option>
          </ion-select>
        </ion-item>
    </ion-row>

</ion-list>

离子获取所有不同类型的动态元素的值

0 个答案: