Angular 从角度中的选项获取数据属性

我有以下HTML，它将

选项

文本双向绑定到

newNumber

实例变量

 <select id="inputState" [(ngModel)]="newNumber" name="newNumber" class="form-control">
    <option data-value-x="192" data-value-y="108" selected="selected"> First</option>
    <option data-value-x="128" data-value-y="72">Second </option>
    <option data-value-x="108" data-value-y="108">Third </option>
    <option data-value-x="72"  data-value-y="72">Forth</option>
 </select>

弗斯特
第二
第三
向前地

---

我想访问所选选项的

data-value-x

和

data-value-y

。这可以通过角度方式实现吗？

只需将select绑定到包含以下值的对象：

    <select name="point" [(ngModel)]="point">
      <option></option>
      <option [ngValue]="{x: 192, y: 108}">First</option>
      <option [ngValue]="{x: 128, y: 72}">Second</option>
    </select>

在模板中：

    <select name="point" [(ngModel)]="point">
      <option *ngFor="let p of points" [ngValue]="p.value">{{ p.name }}</option>
    </select>

{{p.name}}

---

只需将select绑定到包含以下值的对象：

    <select name="point" [(ngModel)]="point">
      <option></option>
      <option [ngValue]="{x: 192, y: 108}">First</option>
      <option [ngValue]="{x: 128, y: 72}">Second</option>
    </select>

在模板中：

    <select name="point" [(ngModel)]="point">
      <option *ngFor="let p of points" [ngValue]="p.value">{{ p.name }}</option>
    </select>

{{p.name}}

---

谢谢。这很有效。不幸的是，它没有将默认选项设置为可见。知道如何显示默认选项吗。我的意思是，在你点击任何东西之前，应该已经显示了一个选项。目前，它是空白的。这确实非常有效。但我更困惑了。我尝试的是直接设置

point

point={x:192，y:108}

。这不会使“选择元素”显示为默认值。但如果我像你一样先将点存储在数组中，它就会起作用。为什么会这样？因为在JavaScript中，

{x:192，y:108}==={x:192，y:108}

是

false

。选定的点必须与选项中的一个点完全相同。不是具有相同属性的不同对象。明白了。谢谢你的时间：）谢谢。这很有效。不幸的是，它没有将默认选项设置为可见。知道如何显示默认选项吗。我的意思是，在你点击任何东西之前，应该已经显示了一个选项。目前，它是空白的。这确实非常有效。但我更困惑了。我尝试的是直接设置

point

point={x:192，y:108}

。这不会使“选择元素”显示为默认值。但如果我像你一样先将点存储在数组中，它就会起作用。为什么会这样？因为在JavaScript中，

{x:192，y:108}==={x:192，y:108}

是

false

。选定的点必须与选项中的一个点完全相同。不是具有相同属性的不同对象。明白了。谢谢您的时间：）