How to get value of custom data attribute in ionic?-CodePudding

I want to get the value of my custom data attribute in ionic. I tried so many ways but none of them worked for me.This is my ion-select:

<ion-item>
  <ion-select value="اصفهان" (ionChange)="getCities($event)" [(ngModel)]="model.united" [ngModelOptions]="{standalone: true}" ok-text="تایید" cancel-text="کنسل">
    <ion-select-option value="{{item.name}}" data-id="{{item.id}}" *ngFor="let item of provinces">{{item.name}}</ion-select-option>
  </ion-select>
</ion-item>

I want to get 'data-id' in my method.This is the method:

getCities($event) {
  const provinceId= $event.target.getAttribute('data-id');
}

But it returns null. What should I do?

CodePudding user response：

You can pass item directly as value instead of item.name and use in your function directly like

<ion-item>
  <ion-select value="اصفهان" (ionChange)="getCities($event)" [(ngModel)]="model.united" [ngModelOptions]="{standalone: true}" ok-text="تایید" cancel-text="کنسل">
    <ion-select-option [value]="item" data-id="{{item.id}}" *ngFor="let item of provinces">{{item.name}}</ion-select-option>
  </ion-select>
</ion-item>

component function

getCities($event) {
  console.log($event, $event.id);
}

CodePudding user response：

target property doesn't have the getAtrribute.The getAtrribute property is available in $event object.

try below code

getCities($event) {
  const provinceId= $event.getAttribute('data-id');
}

Example