"fields": [
{
"type": "radio",
"id": 1,
"label": "1. I want to view the Sleep Presentation because I want to get some insight into my own sleep issues.",
"adminLabel": "",
"isRequired": true,
"size": "medium",
"errorMessage": "",
"inputs": null,
"choices": [
{
"text": "No, Not Really",
"value": "No, Not Really",
"isSelected": false,
"price": ""
},
{
"text": "Somewhat",
"value": "Somewhat",
"isSelected": false,
"price": ""
},
{
"text": "Yes, Definitely",
"value": "Yes, Definitely",
"isSelected": false,
"price": ""
}
],
"formId": 30,
"description": "(If you answer here is (b) or (c), in addition to viewing the presentation, also complete the Sleep Questionnaire to get your report.)",
"allowsPrepopulate": false,
"inputMask": false,
"inputMaskValue": "",
"inputType": "",
"labelPlacement": "",
"descriptionPlacement": "above",
"subLabelPlacement": "",
"placeholder": "",
"cssClass": "",
"inputName": "",
"visibility": "visible",
"noDuplicates": false,
"defaultValue": "",
"conditionalLogic": "",
"productField": "",
"enableOtherChoice": "",
"enablePrice": "",
"multipleFiles": false,
"maxFiles": "",
"calculationFormula": "",
"calculationRounding": "",
"enableCalculation": "",
"disableQuantity": false,
"displayAllCategories": false,
"useRichTextEditor": false,
"enableChoiceValue": false,
"pageNumber": 1,
"displayOnly": ""
},
{
"type": "radio",
"id": 2,
"label": "2. I want to view the Sleep Presentation because I want to get some insight into Sleep issues because someone I know has sleep problems",
"adminLabel": "",
"isRequired": true,
"size": "medium",
"errorMessage": "",
"inputs": null,
"choices": [
{
"text": "No, That Isn't Why I'm Interested",
"value": "No, That Isn't Why I'm Interested",
"isSelected": false,
"price": ""
},
{
"text": "Partly, There Is Someone Close To Me With Sleep Issues",
"value": "Partly, There Is Someone Close To Me With Sleep Issues",
"isSelected": false,
"price": ""
},
{
"text": "Yes, That Is The Main Reason For My Interest",
"value": "Yes, That Is The Main Reason For My Interest",
"isSelected": false,
"price": ""
}
],
"formId": 30,
"description": "",
"allowsPrepopulate": false,
"inputMask": false,
"inputMaskValue": "",
"inputType": "",
"labelPlacement": "",
"descriptionPlacement": "",
"subLabelPlacement": "",
"placeholder": "",
"cssClass": "",
"inputName": "",
"visibility": "visible",
"noDuplicates": false,
"defaultValue": "",
"conditionalLogic": "",
"productField": "",
"enableOtherChoice": "",
"enablePrice": "",
"multipleFiles": false,
"maxFiles": "",
"calculationFormula": "",
"calculationRounding": "",
"enableCalculation": "",
"disableQuantity": false,
"displayAllCategories": false,
"useRichTextEditor": false,
"pageNumber": 1,
"displayOnly": ""
},
这是需要在视图中呈现的表单数据。但是,当我在视图中执行嵌套的ngFor时,无法在选择中获取数据,该页面始终显示空白数据。
<div class="form-group">
<ion-list *ngFor="let field of form.fields">
<!-- TYPE == RADIO -->
<ion-item *ngIf="field.type == 'radio'">
<ion-list radio-group>
<ion-list-header>
<p style="white-space: normal;">{{ field.label }}</p>
</ion-list-header>
<ion-item *ngFor="let choice of field.choices">
<ion-label>{{ choice.text }}</ion-label>
<ion-radio value="{{ choice.value }}"></ion-radio>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
</div>
这是我从api获取数据的方式:
this.apiService.postForm(this.form.id).subscribe(
data => {
this.form_structure = data.data.structure;
},
error => console.log(error)
);
然后我将其传递到这样的模式页面:
var data = { 'form' : this.form_structure };
var modalPage = this.modalCtrl.create(ModalPage,data);
modalPage.present();
我一直在阅读解决方案,很多人说let choice of field.choices
应该可以工作,但是我已经尝试了多次,但没有任何工作对我有用。有什么想法吗?
答案 0 :(得分:0)
我已经更新了我的工作,现在可以工作了。
<ion-list *ngIf="field.type == 'list'" radio-group>
<ion-list-header>
<p style="white-space: normal;">{{ field.label }}</p>
</ion-list-header>
<ion-item *ngFor="let choice of field.choices">
<ion-label>{{ choice.text }}</ion-label>
<ion-radio value="{{ choice.value }}"></ion-radio>
</ion-item>
</ion-list>