将选择元素绑定到角度上的对象

Question

将选择元素绑定到角度上的对象

我对棱角分明是陌生的，我试着用新的做事方法来提高速度。

我想将SELECT元素绑定到对象列表中-这很容易：

@Component({
   selector: 'myApp',
   template: `<h1>My Application</h1>
              <select [(ngModel)]="selectedValue">
                 <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
              </select>`})export class AppComponent{
    countries = [
       {id: 1, name: "United States"},
       {id: 2, name: "Australia"}
       {id: 3, name: "Canada"},
       {id: 4, name: "Brazil"},
       {id: 5, name: "England"}
     ];
    selectedValue = null;}

在本例中，selectedValue似乎是一个数字-所选项的id。

但是，我实际上希望绑定到Country对象本身，这样selectedValue就是对象，而不仅仅是id。我尝试更改选项的值，如下所示：

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

但这似乎行不通。它似乎在我选择的价值中放置了一个对象-但不是我所期望的对象。你可以的在我的柱塞例子中看到这个.

我还尝试绑定到Change事件，以便能够根据选定的id自行设置对象；但是，似乎在更新绑定ngModel之前，更改事件就会触发-这意味着我在此时无法访问新选定的值。

是否有干净的方法将SELECT元素绑定到具有角2的对象？

Answer 1

这可能有助于：<select [(ngModel)]="selectedValue">&nbsp; &nbsp; &nbsp; <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option></select>

Answer 2

您也可以这样做，而不需要使用[(ngModel)]在你的<select>标签在ts文件中声明一个变量toStr = JSON.stringify;在模板中这样做&nbsp;<option&nbsp;*ngFor="let&nbsp;v&nbsp;of&nbsp;values;"&nbsp;[value]="toStr(v)"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{v}}&nbsp;</option>然后使用let&nbsp;value=JSON.parse(event.target.value)将字符串解析为有效的JavaScript对象