带有角度的离子单选按钮不限制每组一个选择

Question

ion-radio（单选按钮）在与 angular for 循环集成以动态生成选项时无法正常工作。 尽管单选按钮是可见的，但选项选择不限于每组一个。 允许多选，这不是单选按钮的预期行为。

按预期工作的文档中单选按钮的示例使用

<ion-list>
  <ion-radio-group>
    <ion-list-header>
      <ion-label>Name</ion-label>
    </ion-list-header>

    <ion-item>
      <ion-label>Biff</ion-label>
      <ion-radio slot="start" value="biff" checked></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Griff</ion-label>
      <ion-radio slot="start" value="griff"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-label>Buford</ion-label>
      <ion-radio slot="start" value="buford"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

使用无法按预期工作的角度动态生成选项

<div *ngFor="let item of quiz; let i = index">
  <ion-list >
    <ion-radio-group>
      <ion-list-header>
        <ion-label>{{item.quiz_question}}</ion-label>
      </ion-list-header>
      <div *ngFor="let option of item.quiz_option; let z = index">
      <ion-item>
        <ion-label>{{option.quiz_option_txt}}</ion-label>
        <ion-radio slot="start" value="biff"></ion-radio>
      </ion-item>
      </div>
    </ion-radio-group>
  </ion-list>
</div>

每组只允许选择一个选项。

Answer 1

这是因为您没有在 ion-radio 中使用不同的“值”。尝试这样做：

<ion-list *ngFor="let item of quiz; let i = index">
    <ion-radio-group>
        <ion-list-header>
            <ion-label>{{item.quiz_question}}</ion-label>
        </ion-list-header>

        <ion-item *ngFor="let option of item.quiz_option; let z = index">
            <ion-label>{{option.quiz_option_txt}}</ion-label>
            <ion-radio slot="start" [value]="z"></ion-radio>
        </ion-item>

    </ion-radio-group>
</ion-list>