Angular - 使用 ngFor 将自定义（数据）属性添加到 <option>

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>

例如，当我为数据属性赋予静态值时，它可以工作，以下工作没有任何问题（注意数据 isocode 具有静态值）

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

但是，当我尝试在 data-isocode 中使用变量时

<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);
}

this.form.value但无法通过以下方式访问它，因为this.form.value仅给出“值”元素。如果您想在那里访问它，则必须使用数据属性值 onChange 覆盖该值。但这将是一种迂回的方式来完成事情。