Prevent ListView items from emitting ngModelChange after filter


#1

I am experiencing some unwanted behavior with ListView when I apply a filter on the items. My ListView looks something like this (the segmentFilter pipe just applies a Javascript filter on the items array):

<ListView [items]="items | segmentFilter: segmentFilter">
  <template let-item="item" let-index="index">
    <Switch [(ngModel)]="item.available" (ngModelChange)="doSomething(item)"></Switch>
  </template>
</ListView>

The idea is that doSomething() should only be called when the user actually toggles the switch. Say that my items array looks like this:

[
  { name: "A", available: true },
  { name: "B", available: false }
]

Now when I tell my segmentFilter pipe to return only objects in the items array that have available===false, what happens is that the ngModelChange is emitted even though the item itself did not change!

My best guess is that after applying the filter, the index of the second object in the array changes and listview treats it as a changed item. I would expect ListView to re-init the objects and not treat the original object at items[1] now returned as items[0] as a change of the original items[0].

Any advice on how to tackle this issue? Should I approach this by somehow trying to have ListView re-init instead of try to make sense of changed objects?

Thanks!