2016-11-10 2 views
2

Возможно, это было задано, но я уже давно пробовал работать в Google, не получая никакого решения.Angular2 - Как получить доступ к значению, хранящемуся в атрибутах данных

У меня есть следующее поле выбора в Angular2, как мне получить доступ к сохраненному значению в атрибуте данных attr.data-thisdata?

<select #dial"> 
    <option *ngFor="let something of somethings" 
    [value]="something.value" 
    [attr.data-thisdata]="something.data" 
    >{{something.text}}</option> 
</select> 

Я попытался следующие, но не получают никаких значений:

  1. <select (change)="readData($event.target.dataset)>...<select>
  2. <select (change)="readData($event.target.dataset.thisdata)>...<select>

Мои readData является просто:

readData(data:any){ 
    console.log(data) 
} 

EDIT 1: добавлена ​​plunker для удобства

EDIT 2: включен plunker from Günter's answer

ответ

1

С [ngValue] вместо значения вы можете присвоить объект вместо только строки.

<select #dial" ngModel (ngModelChange)="$event.data"> 
    <option *ngFor="let something of somethings" 
    [ngValue]="something" 
    [attr.data-thisdata]="something.data" 
    >{{something.text}}</option> 
</select> 

Plunker example

+0

но 'something' определен только в'

+0

Я вижу, мой плохой. Я уточню свой ответ. –

+0

обновлен. , , , , –

0

Для ответа на исходный вопрос о том, как получить доступ к атрибуту данных элемента опции через событие A Выбор элемента, использование:

event.target[event.target.selectedIndex].dataset.thisdata 

Причина event.target.dataset.thisdata не работает в атрибут данных фактически относится к опции, но событие здесь происходит от элемента select. Мы можем получить доступ к выбранному параметру, используя свойство selectedIndex select.

Смежные вопросы