Как получить атрибут select in angular 6

Question

Я попробовал код ниже, чтобы получить значение атрибута данных страны, но не сработало.

  fieldId: target.getAttribute('data-country_id'),
   const selectEl = event.target;
   var id = angular.element(event).data('country_id');
  console.log("test"+event.currentTarget.getAttribute("data-id"));

  <select name="state"  [(ngModel)]="model.state"  id="state"  (ngModelChange)="GetCitySelected($event)" >
  <option *ngFor="let state of StateList" value="{{state.id}}" [attr.data-country_id]="state.country_id">{{state.name}}</option>
   </select>
                                            
                                   

Answer 1

Вам нужен индекс выбранной опции, чтобы получить значение атрибута выбранной опции.

HTML

<select name="state" [(ngModel)]="model.state" (change)="stateChange($event)"  id="state">
  <option *ngFor="let state of StateList" [value]="state.id" [attr.data-country_id]="state.country_id">{{state.name}}</option>
</select>

Компонент

stateChange(event){
    let selectedIndex:number = event.target["selectedIndex"];
    console.log(event.target.options[selectedIndex].getAttribute("data-country_id"))
}

Я использовал (изменить) событие вместо (ngModelChange) для вашего решения.

Answer 2

вы можете сделать это с помощью [value] привязки с ngModel.

 <select name="state"  [(ngModel)]="model.state"  id="state"  (ngModelChange)="GetCitySelected($event)" >
      <option *ngFor="let state of StateList" [value]="state" [attr.data-country_id]="state.country_id">{{state.name}}</option>
 </select>

здесь вам нужно сопоставить данные атрибута valueс переменной ngModel.