From 915c05a1793d5f766b09c1da08ac3dbd52ed9ad4 Mon Sep 17 00:00:00 2001 From: Jeremy Forsythe Date: Tue, 22 Sep 2020 15:03:42 -0400 Subject: [PATCH 1/3] docs(select): fix Objects as Values docs Fix the Objects as Values documentation to add the necessary value property to the template, simplify the compare function, and add an interface for type checking. Add an Objects as Values with Multiple Selection documentation section to show the difference with the compare function which needs to determine if an object is in the array of selected objects This fixes an issue noted in the forums at https://forum.ionicframework.com/t/ionic-5-ion-select-objects-as-values-not-working/191807/2 --- core/src/components/select/readme.md | 78 ++++++++++++++++++++++++++-- 1 file changed, 74 insertions(+), 4 deletions(-) diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 8d8825a3de2..9d212668722 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -209,7 +209,7 @@ However, the Select Option does set a class for easier styling and allows for th Users - {{user.first + ' ' + user.last}} + {{user.first + ' ' + user.last}} @@ -218,13 +218,19 @@ However, the Select Option does set a class for easier styling and allows for th ```typescript import { Component } from '@angular/core'; +interface User { + id: number; + first: string; + last: string; +} + @Component({ selector: 'select-example', templateUrl: 'select-example.html', styleUrls: ['./select-example.css'], }) export class SelectExample { - users: any[] = [ + users: User[] = [ { id: 1, first: 'Alice', @@ -242,11 +248,75 @@ export class SelectExample { } ]; - compareWithFn = (o1, o2) => { + compareWith(o1: User, o2: User) { return o1 && o2 ? o1.id === o2.id : o1 === o2; }; +} +``` + +### Objects as Values with Multiple Selection + +```html + + + + Objects as Values (compareWith) + + - compareWith = compareWithFn; + + Users + + {{user.first + ' ' + user.last}} + + + +``` + +```typescript +import { Component } from '@angular/core'; + +interface User { + id: number; + first: string; + last: string; +} + +@Component({ + selector: 'select-example', + templateUrl: 'select-example.html', + styleUrls: ['./select-example.css'], +}) +export class SelectExample { + users: User[] = [ + { + id: 1, + first: 'Alice', + last: 'Smith', + }, + { + id: 2, + first: 'Bob', + last: 'Davis', + }, + { + id: 3, + first: 'Charlie', + last: 'Rosenburg', + } + ]; + + compareWith(o1: User, o2: User | User[]) { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((u: User) => u.id === o1.id); + } + + return o1.id === o2.id; + }; } ``` From 5ad3031b379b37b148a82599b8cc7478e9c55100 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 1 Oct 2020 16:41:22 -0400 Subject: [PATCH 2/3] docs(select): add docs into the usage file --- core/src/components/select/usage/angular.md | 80 +++++++++++++++++++-- 1 file changed, 75 insertions(+), 5 deletions(-) diff --git a/core/src/components/select/usage/angular.md b/core/src/components/select/usage/angular.md index bff14eda67d..5321e51d4bb 100644 --- a/core/src/components/select/usage/angular.md +++ b/core/src/components/select/usage/angular.md @@ -80,7 +80,7 @@ Users - {{user.first + ' ' + user.last}} + {{user.first + ' ' + user.last}} @@ -89,13 +89,19 @@ ```typescript import { Component } from '@angular/core'; +interface User { + id: number; + first: string; + last: string; +} + @Component({ selector: 'select-example', templateUrl: 'select-example.html', styleUrls: ['./select-example.css'], }) export class SelectExample { - users: any[] = [ + users: User[] = [ { id: 1, first: 'Alice', @@ -113,11 +119,75 @@ export class SelectExample { } ]; - compareWithFn = (o1, o2) => { + compareWith(o1: User, o2: User) { return o1 && o2 ? o1.id === o2.id : o1 === o2; }; +} +``` + +### Objects as Values with Multiple Selection + +```html + + + + Objects as Values (compareWith) + + + + + Users + + {{user.first + ' ' + user.last}} + + + +``` + +```typescript +import { Component } from '@angular/core'; + +interface User { + id: number; + first: string; + last: string; +} + +@Component({ + selector: 'select-example', + templateUrl: 'select-example.html', + styleUrls: ['./select-example.css'], +}) +export class SelectExample { + users: User[] = [ + { + id: 1, + first: 'Alice', + last: 'Smith', + }, + { + id: 2, + first: 'Bob', + last: 'Davis', + }, + { + id: 3, + first: 'Charlie', + last: 'Rosenburg', + } + ]; - compareWith = compareWithFn; + compareWith(o1: User, o2: User | User[]) { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((u: User) => u.id === o1.id); + } + + return o1.id === o2.id; + }; } ``` @@ -198,4 +268,4 @@ export class SelectExample { subHeader: 'Select your favorite color' }; } -``` \ No newline at end of file +``` From 7b5d203bd64662352a31985c9982a8cbb59879a3 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Thu, 1 Oct 2020 16:45:40 -0400 Subject: [PATCH 3/3] style(usage): remove unnecessary semi-colons --- core/src/components/select/readme.md | 4 ++-- core/src/components/select/usage/angular.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md index 9d212668722..d1888ff1dd4 100644 --- a/core/src/components/select/readme.md +++ b/core/src/components/select/readme.md @@ -250,7 +250,7 @@ export class SelectExample { compareWith(o1: User, o2: User) { return o1 && o2 ? o1.id === o2.id : o1 === o2; - }; + } } ``` @@ -316,7 +316,7 @@ export class SelectExample { } return o1.id === o2.id; - }; + } } ``` diff --git a/core/src/components/select/usage/angular.md b/core/src/components/select/usage/angular.md index 5321e51d4bb..0bfd985904c 100644 --- a/core/src/components/select/usage/angular.md +++ b/core/src/components/select/usage/angular.md @@ -121,7 +121,7 @@ export class SelectExample { compareWith(o1: User, o2: User) { return o1 && o2 ? o1.id === o2.id : o1 === o2; - }; + } } ``` @@ -187,7 +187,7 @@ export class SelectExample { } return o1.id === o2.id; - }; + } } ```