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>

当我给data属性一个静态值时，它可以正常工作。例如，以下代码没有任何问题（请注意，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中使用FormBuilder传递数据属性（例如jQuery）并获取值？

- Ibrahim Azhar Armar

---

你可以尝试像这样绑定 [attr.data-isocode]="region.iso_code"。 - Rajshri Mohan K S

按照以下方式进行：[attr.data-isocode]="region.iso_code"。 - CruelEngine

可能是如何在Angular2中绑定到data-*属性？的重复问题。 - Rajshri Mohan K S

工作正常，谢谢。我如何使用FormBuilder访问.ts文件中的值？ - Ibrahim Azhar Armar

或许，您正在查看类似于这样的内容？https://dev59.com/4VsW5IYBdhLWcg3w0aDM#50582487 - Rajshri Mohan K S

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覆盖值。但这将是一个绕弯路的方式来完成任务。

- Rajshri Mohan K S