Angular2 - 如何访问存储在数据属性中的值

Question

可能有人问过这个问题，但我尝试谷歌搜索了一段时间但没有得到任何解决方案。

我在 Angular2 中有以下 select 字段，如何访问 attr.data-thisdata 的数据属性中的存储值？

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

我尝试了以下但没有得到任何值：

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

我的 readData 很简单：

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

编辑 1：添加 plunker 以便于参考

编辑 2：包括 plunker from Günter's answer

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

Answer 2

要回答如何通过 select 元素的事件访问选项元素的数据属性的原始问题，请使用：

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

event.target.dataset.thisdata 不起作用的原因是数据属性实际上属于选项，但这里的事件来自 select 元素。我们可以使用 select 的 selectedIndex 属性.

访问 selected 选项

Angular2 - 如何访问存储在数据属性中的值

Angular2 - How to access value stored in data attributes

custom-data-attribute

angular