Angular - добавить пользовательский (data) атрибут к <option>, используя ngFor

Question

Мне нужно добавить пользовательский атрибут данных, чтобы выбрать параметры.Я хочу это, потому что при изменении я хочу вызвать действие на основе выбранного атрибута (не значения)

Вот код, который я использую

<select (domChange)="onListUpdate($event)" formControlName="region" id="region" class="selectric form-control">
    <option code="" value="-1">{{ 'select_country' | translate }}</option>
    <option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>
</select>

Это работает, когда я даю статическое значение даннымНапример, следующий атрибут работает без проблем (обратите внимание, что изокод данных имеет статическое значение)

<option data-isocode="abc" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

Однако, когда я пытаюсь использовать переменную в изокоде данных

<option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

Это выдает мне следующую ошибку

Can't bind to 'isocode' since it isn't a known property of 'option'

Как передать атрибут данных (как в jQuery) с Angular и получить значение с помощью FormBuilder?

Answer 1

Вы можете привязать атрибуты data- следующим образом:

[attr.data-isocode]="region.iso_code"

Вы можете получить доступ к значению через привязку события, например:

getData(event){
  console.log(event.target.dataset.isocode);
}

Доступ к нему через this.form.value невозможен, поскольку this.form.value предоставляет только элементы "value". Вы должны переопределить значение значением атрибута данных onChange, если хотите получить к нему доступ. Но это будет окольный способ добиться цели.