How to get ion-select text

Ionic Framework ionic-v3
1

Hi,
I am trying to get the ion-select option’s text. Here is my object structure
{
“data”: [
{
“id”: “203”,
“bench”: “abc”
},
{
“id”: “205”,
“bench”: “def”
},
{
“id”: “207”,
“bench”: “ghi”
}
]
}
here is my HTML

<ion-select name="bench" formControlName="bench">
                    <ion-option *ngFor="let b of benchList" value="{{b.id}}">{{b.bench}}</ion-option>
                </ion-select>

how could i get the ‘b.bench’ . I need both id and bench. I got the id by using value attribute but i can’t find a way to get bench value. Please help me with this problem. Thanks.

2

try index of list and return that with value attribute and access your data with that index.

3

you should use property binding (data binding from component to view) to get the value

[value] = 'b.id'

Then, use event binding method ionChange in your template

<ion-select ionChange=change(b)>
` <ion-option *ngFor="let b of benchList" [value]="b.id" >{{b.bench}}</ion-option>`
</ion-select>

in your component, define

change(data){
let bench: any = data;
console.log(bench.id);
console.log(bench.bench); 
}

please check if it works.
Ashley

2 Likes
4

Generally I prefer this style as well, but in this case it doesn’t matter. When all you’re dealing with is strings, [value]="foo" and value="{{foo}}" are equivalent.

It doesn’t. b isn’t in scope when you’re trying to use it, so it will always be undefined.

<ion-option *ngFor="let b of benchList" [value]="b">{{b.bench}}</ion-option>

Now your control’s value will be the bench object, containing both id and name.

2 Likes
5

Well pointed out.

Ashley

6

Hello, @sumitk91, did you solve this issue? If so please help me.

7

Yes this has been resolved. All you have to do is

<ion-option *ngFor="let b of benchList"  value="b">{{b.bench}}</ion-option>

you can use ion-select as a form and on the change event pass the the form control data in value and get the data by using

change(){
let bench: any = this.formName.controls.formControlName.value;
console.log(bench);
}
1 Like
8

Hello @sumitk91, thanks for the reply, tried your mentioned way, but getting value instead of selected text.

9

@Ramsk can you post a snippet of the array you are binding in ion-select?

10

Add a variable for the index if you ngFor. If you were to use console.log(benchList[index].bench, that should give you want you want.

11

suppose you are binding b = { ‘id’: 1, ‘name’: ‘test’}

<ion-option *ngFor="let b of benchList"  value="b.name">{{b.name}}</ion-option>

you can now access the value by

change(){
let bench: any = this.formName.controls.formControlName.value;
console.log(bench);
}
12

code at .html file

<form [formGroup]="AddDonation" (ngSubmit)="onSubmit()">
      
      <ion-item>
        <ion-label floating >Select Donor</ion-label>
        <ion-select  formControlName="DonorID"  (ionChange)="onChange()">
          <ion-option *ngFor="let Donor of Donors;"  value="{{Donor.Id}}" >{{Donor.FirstName}} </ion-option>
        </ion-select>
      </ion-item>
</form>

code at .ts file

onChange()
{
let DonorName: any = this.AddDonation.controls.formControlName.value;
alert(DonorName);
}
when I tried this I got nothing, So I changed formControlName to DonorID like below

onChange()
{
let DonorName: any = this.AddDonation.controls.DonorID.value;
alert(DonorName);
}
this time I got DonorD value, but I need DonorName in the text format.

13

In that case use

 <ion-option *ngFor="let Donor of Donors;"  value="{{Donor.FirstName}}" >{{Donor.FirstName}} </ion-option>

pass firstName as value

value="{{Donor.FirstName}}"