I use a virtualScroll with radio-group. The ngModel binding works, but if I’ ve a “selectedItem” at the beginning of the list, if I scroll I see also another radio selected.
Morover if I bind a “selectedItem” that it is at the end of the list, the radio is not selected. (If I scroll at the end of the list my item is not selected).
How I can solve? I have to use virtualScroll because I see an higth improvement on the performances.
<ion-list [virtualScroll]="items" radio-group [(ngModel)]="selectedItem" [approxItemHeight]=" '45px' ">
<ion-item *virtualItem="let item" >
<ion-radio color="secondary" [value]="item" item-left></ion-radio>
Could you create a plunker demo of this? I suspect that it is because
virtualScroll reuses the items as you scroll through the list. You might want to try to add
virtualTrackBy to see if that solves the problem.
I’ve already used virtualTrackBy. I don’t know if it is correct.
In this plunker http://plnkr.co/edit/hVLSKQF76ELJSaLq1PbT?p=preview
you can see:
if you select the first item (my0), all it is ok.
If you select the 2nd “my1” item, and then if you scroll down, you can see that also “my60” is selected, and then if you scroll up, the selection on my1 disappears, or another item is selected.
If you select “my2” item and then you scroll, “my61” also is selceted… etc…
All custom code is in:
Do you have any suggestions?
Definitely seems to be an interaction where
virtualScroll is reusing items and therefore reproducing checked items. If you move the
virtualScroll out of the
radio-group is used it seems to work as you can see in this plunker: http://plnkr.co/edit/wMonK89LKecf1LORkhfx?p=preview
You might want to open a github issue for this. Seems like an unintended interaction between
virtualScroll. The other problem you might run into is if you need to use
ngModel to track the selected I was running into display issues as you can see in this plunker: http://plnkr.co/edit/i20QdRjidsFGSpuoqcVY?p=preview