IONIC 2单选按钮在虚拟滚动中，如果我选择任何一个选项，就会自动选择多个选项

Question

这是我的虚拟滚动代码

 <ion-list [virtualScroll]="options" *ngIf="options.length>99" radio-group style="opacity: 0.9;">
    <ion-item *virtualItem="let option">
        <ion-label style="font-size: 12pt" text-wrap>{{ option.optionText }} </ion-label>
        <ion-radio value='{{ option.optionId }}' (ionSelect)="setSelectedOption(option)"></ion-radio>
    </ion-item>       
</ion-list>

任何帮助将不胜感激谢谢

编辑-我刚刚发现这个问题已经在 GitHub 上 been raised 但如果有人可以帮助我解决任何非常有用的解决方法

Answer 1

好的，所以您正在寻找解决方法。

如果我查看<ion-radio> 的docs，有一个名为checked 的选项，就像普通的单选按钮一样。这意味着你可以这样做：

<ion-radio value='{{ option.optionId }}' (ionSelect)="setSelectedOption(option)" [checked]="isChecked(option.optionId)"></ion-radio>

ts

options: = [];
selectedOptions: number[] = [];

constructor() {}

setSelectedOption(option: any) {
    let index = this.selectedOptions.indexOf(option.optionId);
    if(index > -1) {
       this.selectedOptions.push(option.optionId);
    } else {
       this.selectedOptions.slice(index, 1);
    }
}

isChecked(id: number): boolean {
    // true if id is in selectedOptions, false if it isn't
    return (this.selectedOptions.indexOf(id) > -1);
}

编辑

尝试使用普通的 HTML 无线电输入，因为那时离子输入似乎有问题

<form action="">
   <ion-list [virtualScroll]="options" *ngIf="options.length>99" style="opacity: 0.9;">
      <ion-item *virtualItem="let option">
        <ion-label style="font-size: 12pt" text-wrap>{{ option.optionText }} </ion-label>
        <input type="radio" [value]="option.optionId" (click)="setSelectedOption(option) [checked]="isChecked(option.optionId)">
    </ion-item>       
  </ion-list>
</form>