Question

我在component.html中的代码

<select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (change)="menuChange($event)">
  <option *ngFor="let menu_optional of menu_optionals" value="{{ menu_optional.id }}" [attr.data-somedata]="menu_optional.id">{{ menu_optional.name }}</option>
</select>`

这是我的组件。

menuChange(event) {
    console.log(event.data);
}

返回undefined

我希望在data-somedata中获得价值..

Answer 1

由于您的attr.data-some-data值与value相同，您只需写下：

console.log(event.target.value);

但如果您真的想获得该数据属性，请使用以下代码：

const selectEl = event.target;

const val = selectEl.options[selectEl.selectedIndex].getAttribute('data-somedata');
// or
const val = selectEl.options[selectEl.selectedIndex].dataset.somedata;

Answer 2

试试这样：

使用（ngModelChange）代替（更改）

<select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (ngModelChange)="menuChange($event)">
  <option *ngFor="let menu_optional of menu_optionals" [value]=" menu_optional.id" [attr.data-somedata]="menu_optional.id">{{ menu_optional.name }}</option>
</select>

Answer 3

对于正在使用MatSelect（Angular material＆gt; 1）＆amp;反应形式，低于一个为我工作

<强> HTML

<mat-form-field class="full-width">
    <mat-select placeholder="Field 1" 
      [formControl]="form.controls['field1']" 
      (change)="dropDownChnge($event)">
      <mat-option *ngFor="let fieldOpt of fieldOpts.options" [attr.data-fieldId]="fieldOpts.fieldId" [value]="fieldOpt.id">{{ fieldOpt.name }}</mat-option>
    </mat-select>
</mat-form-field>

<强> Component.js

dropDownChnge(event) {
    let target = event.source.selected._element.nativeElement;
    let selectedData = {
      fieldId: target.getAttribute('data-fieldId'),
      valueId: event.value,
      value: target.innerText.trim()
    };
    console.log(selectedData);
}

如果此解决方案中有最佳解决方案或任何错误，请告诉我，只是好奇地知道： - ）

Answer 4

对于角材料> 7

Component.ts

menuChange(event) {
// _getHostElement : Gets the current Host DOM element
console.log(event.option._getHostElement().getAttribute('data-somedata'));
}

Angular 4 On select change get属性数据值

4 个答案: