how to get multiple values on ion-select

3
votes

I am trying to make a simple create group page with ion-select and ion-option.

my html;

<ion-item>
  <ion-label>Select Friends</ion-label>
  <ion-select [(ngModel)]="selectedFriendsArray" multiple="true" cancelText="cancel" okText="ok">
    <ion-option *ngFor="let friend of myFriendsArray; let i = index" value="{{friend.$value}}" selected="false">{{friend.fullName}} (@{{friend.$key}})</ion-option>
  </ion-select>
</ion-item>

that's the code, I can successfully get myFriendsArray; that Array's structure is like that; (console.log(myFriendsArray))

0: {$value: "2MAHfzIraRO3lsYrlwhY6dlVUi52", fullName: "Walter White", userName: "wwhite", $key: "wwhite", $exists: ƒ}
1:{$value: "4TV40AiZb6a9IPNjhSGM7Q15EPz1", fullName: "Jesse Pinkman", userName: "test1", $key: "test1", $exists: ƒ}
2:{$value: "XKCk1bE0DvUKFTPTpFebkxLGI4J2", fullName: "Tony Soprano", userName: "test2", $key: "test2", $exists: ƒ}
3:{$value: "yICGapOLBaZae7EgdiRlGA4lmPF3", fullName: "Paulie", userName: "test4", $key: "test4", $exists: ƒ}
4: {$value: "JrdULejAG3ZXp3ws7foZAvhZb8w2", fullName: "Polat Alemdar", userName: "polat123", $key: "polat123", $exists: ƒ}

when the user selects some friends to add, selectedFriendsArray logs in the console like this;

0: "4TV40AiZb6a9IPNjhSGM7Q15EPz1"
1: "XKCk1bE0DvUKFTPTpFebkxLGI4J2"
2: "yICGapOLBaZae7EgdiRlGA4lmPF3"

but I don't want it like that, I want it exactly like this;

1:{$value: "4TV40AiZb6a9IPNjhSGM7Q15EPz1", userName: "test1"}
2:{$value: "XKCk1bE0DvUKFTPTpFebkxLGI4J2", userName: "test2"}
3:{$value: "yICGapOLBaZae7EgdiRlGA4lmPF3", userName: "test4"}

because I want a data structure like this in my database;

groups>groupid>members>memberuid: "memberusername"

I really love ion-option but it writes only value="" input to the array, how can I do that?

thanks for reading assist me please..

2
angularfirebaseionic-frameworkfirebase-realtime-databaseionic3

2 Answers

4
votes

You can "build" the object you want with value:

<ion-option *ngFor="let friend of myFriendsArray; let i = index" 
  [value]="{$value: friend.$value, userName: friend.userName}" selected="false">
  {{friend.fullName}}
</ion-option>

StackBlitz

1
votes
<ion-item>
  <ion-label>Select Friends</ion-label>
  <ion-select [(ngModel)]="selectedFriendsArray" multiple="true" cancelText="cancel" okText="ok">
    <ion-option *ngFor="let friend of myFriendsArray; let i = index" value="{{friend.$value}}" selected="false" (ionSelect)="friedFun(friend)">{{friend.fullName}} (@{{friend.$key}})</ion-option>
  </ion-select>
</ion-item>

ts file

friendFun(value){
    var myObj =  {value: value.value, userName:  value.userName};
}