Radio buttons not displaying in nested ionic list

Ionic Framework ionic-v3
1

Hi there

I have a nested list with text and radio button that is not displaying in Ionic 2.

This is a bit of a desperate situation and I have been sitting for hours with this. Worst of all it used to work but since updating the framework to 2.0.0-rc.6 it doesn’t render anymore.

<ion-list class="opl-question-container">
    <ion-item *ngFor="let opl of Opls">
        <ion-item *ngFor="let q of opl.Questions" class='questionDescibe' text-wrap>
            <ion-list-header>
                {{ q.QuestionName }}
            </ion-list-header>
            <ion-list radio-group text-wrap>
                <ion-item *ngFor="let a of q.Answers">
                    <ion-label class="opl-question-answers">{{a.AnswerDescription}}</ion-label>
                    <ion-radio [value]='a.AnswerDescription'></ion-radio>
                </ion-item>
            </ion-list>
        </ion-item>
    </ion-item>
</ion-list>

If I replace the ion-label and ion-radio with just text it does render.

Any advice perhaps on how to solve this issue?

Herewith the structure of the Opls

{
  "Opl_Id": 103,
  "OplDescription": "Lesson One",
   "Questions": [
   {
    "Question_Id": 11,
     "QuestionName": "1. How are you today?",
    "QuestionDescription": "1. How are you today?",
     "QuestionType": "radio",
     "Answers": [
      {
       "Answer_Id": 33,
        "AnswerDescription": "I am well thanks",
       "Correct": false,
       "DateCreated": "0001-01-01T00:00:00",
       "DateUpdated": "0001-01-01T00:00:00"
     },
     {
       "Answer_Id": 34,
       "AnswerDescription": "Could be better but not too bad",
       "Correct": false,
      "DateCreated": "0001-01-01T00:00:00",
       "DateUpdated": "0001-01-01T00:00:00"
     },
     {
    "Answer_Id": 35,
    "AnswerDescription": "Not too good",
    "Correct": true,
    "DateCreated": "0001-01-01T00:00:00",
    "DateUpdated": "0001-01-01T00:00:00"
  }
]

},

Thank you

2

Apparently nesting an ion-list within another ion-item when using an ngFor is not allowed … see this post https://github.com/driftyco/ionic/issues/5605

3 
I have found that changing <ion-item> to something else like <button> will work and allows nested list of <ion-item>.

<ion-item *ngFor="let opl of Opls">
..
</ion-item>

to this

<button *ngFor="let opl of Opls">
..
</button>
4

It is also a common misconception that one must have an element when using ngFor. The * syntax is just sugar; you can just write:

<ng-template ngFor let-opl [ngForOf]="Opls">