Question

我有一个嵌套列表，其中包含未在Ionic 2中显示的文本和单选按钮。

这是一个绝望的情况，我已经坐了几个小时。最糟糕的是它曾经工作但是由于将框架更新为2.0.0-rc.6它不再渲染。

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

如果我只用文本替换离子标签和离子收音机，它就会渲染。

或许有关如何解决这个问题的建议？

这是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"
      }
    ]
  },

谢谢

Answer 1

我使用这个结构让它工作

<ion-col *ngFor="let opl of Opls">
  <ion-col *ngFor="let q of opl.Questions">
    <ion-list radio-group>

      <ion-list-header>
        {{q.QuestionName}}
      </ion-list-header>

      <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-col>
</ion-col>

这取代了伪造的ion-list和ion-item，我认为它在*ngFor的嵌套重复中导致与布局显示冲突

单选按钮不显示在嵌套离子列表中

1 个答案: