嵌套的 ngFor Ionic 2：不工作

Question

"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 这应该可行，但我已经尝试了多次，但对我来说没有任何效果。有什么想法吗？

Answer 1

我已经更新了我的工作，现在可以使用了。

<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>

嵌套的 ngFor Ionic 2：不工作

Nested ngFor Ionic 2 : Not working

ionic-framework

ionic2

angular