Angular

Question

我需要将自定义数据属性添加到 select 选项。我想要它是因为在更改时我想根据 selected 属性（不是值）

触发操作

这是我使用的代码

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

但是，当我尝试在 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 只给出 "value" 元素。如果你想在那里访问它，你必须用你的数据属性值 onChange 覆盖它。但这将是完成任务的迂回方式。

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

Angular - add custom (data) attribute to <option> using ngFor

angular2-formbuilder

angular7