【发布时间】：2018-08-11 08:28:49
【问题描述】：
"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 这应该可以工作，但我已经尝试了多次，但对我没有任何效果。有什么想法吗？
【问题讨论】：
-
您能说明
form或fields是如何声明的吗？ -
@AugustinR 我已经更新了我上面的问题
-
@SujataChanda 它适用于文本输入，但不适用于无线电输入
标签： angular ionic-framework ionic2