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>

例如，当我为数据属性赋予静态值时，它可以工作，以下内容可以正常工作（注意数据等价码具有静态值）

<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中的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覆盖该值。但这将是完成任务的一种round回方式。

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

1 个答案: