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

【问题标题】：Angular - add custom (data) attribute to <option> using ngForAngular - 使用 ngFor 将自定义（数据）属性添加到 <option>
【发布时间】：2019-06-15 12:27:15
【问题描述】：

我需要添加自定义数据属性来选择选项。我想要它，因为在更改时我想触发基于所选属性（而不是值）的操作

这是我正在使用的代码

<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 获取值？

【问题讨论】：

你能试试像[attr.data-isocode]="region.iso_code"这样的绑定吗？
这样做：[attr.data-isocode]="region.iso_code".
How to bind to data-* attribute in angular2?的可能重复
工作，谢谢，如何使用 FormBuilder 访问 .ts 文件中的值？
@IbrahimAzharArmar 您可以通过 @ViewChild 与元素绑定来获取它。但我不明白。如果您要绑定像 region.iso_code 这样的变量/属性，它一开始不是来自 .ts 吗？

标签： angular angular7 angular2-formbuilder

【解决方案1】：

您可以像这样绑定到data- 属性：

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

您可以通过如下事件绑定访问该值：

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

通过this.form.value 访问它是不可能的，因为this.form.value 只给出“值”元素。如果您想在那里访问它，您必须用您的数据属性值 onChange 覆盖该值。但这将是完成工作的一种迂回方式。

【讨论】：