角——添加自定义属性(数据)

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>

例如，当我为数据属性提供静态值时，它可以工作，以下工作没有问题（请注意，data-isocode具有静态值）

<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'

如何使用Angular传递数据属性（如jQuery），并使用FormBuilder获取值？

Answer 1

您可以绑定到 data- 属性，如下所示：

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

您可以通过事件绑定来访问该值，如下所示:

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

通过＜code＞this.form.value