[Ionic 5] ion-select Objects as Values not working

Ionic Framework
2

Thanks. I haven’t had a new reason to hate on JavaScript for a while.

First off, in case you care, Category can be greatly simplified:

export class Category {
  constructor(public guid: string, public name: string) {}
}

The comparison function can also be accessed directly:

compareWith(o1: Category, o2: Category): boolean {
  return o1 && o2 ? o1.guid === o2.guid : o1 === o2;
}

The only reason to make it an arrow function is if one needs access to other properties of the page controller (which I would generally consider a red flag that something is flawed in the design).

Now for what to do to improve the situation: add [value]="category" to the <ion-select-option>. Without it, the content of the element becomes the value, not the desired object. Which, as you discovered, has some drastic consequences for the poor comparison function, because JavaScript is a horrible, terrible, very bad, no-good language that nobody should have to use for anything.

Your comparison function will happily declare any two strings equal, because:

o1 && o2 => true
o1.guid => undefined
o2.guid => undefined
undefined === undefined => true

…and in the absence of a proper [value] binding for the select option, the resultant values will be the strings “Test 1” and “Test 2”.

Yes, you could modify the comparison function to check that it’s being called with objects, but the point is that app programmers shouldn’t have to do such minutiae.

2 Likes