Angular 4 - 在选择列表中使用对象作为选项值

Question

我知道有人问过类似的问题，但我没有找到一个好的答案。我想以 Angular 形式创建一个选择列表，其中每个选项的值都是一个对象。另外，我不想使用 2 方式数据绑定(bind)。例如如果我的组件有这些字段:

    lUsers: any[] = [        { Name: 'Billy Williams', Gender: 'male' },        { Name: 'Sally Ride', Gender: 'female'}        ];    curUser: any;

我希望我的 HTML 模板包含以下内容:

    <select #selectElem (change)="setNewUser(selectElem.value)">        <option *ngFor="let user of lUsers" [ngValue]="user">            {{user.Name}}        </option>    </select>

但是，使用此代码，我的 setNewUser() 函数接收所选用户的 Name 字段的内容。为什么它选择那个特定领域，我不知道。我期望的是它会收到所选选项的“值”，我专门将其设置为用户对象。

请注意，我在选项中使用了 ngValue 而不是 value。那是其他人在 SO 上的建议。如果我改为使用值，则会发生对象被转换为字符串“[Object object]”，这是 setNewUser() 接收的内容，这是无用的。

仅供引用，我在 Windows 10 上工作，使用 angular 4.0.0 和 @angular/cli 1.1.2。这是 setNewUser() 方法:

    setNewUser(user: User): void {    console.log(user);    this.curUser = user;    } // setNewUser()

我正在确定到底传递给它的是什么，我记录它，并将其包含在模板中:<pre>{{curUser}}</pre>

Answer 1

我目前正在使用 [ngValue]，它可以很好地存储对象。

可以在 this question 中找到关于使用 (change) 而不是 (ngModelChange) 时遇到问题的解释

因此，由于您已经使用过 [ngValue]，您可能想做这样的事情，您将只使用一种方式绑定(bind)以便能够使用 ngModelChange 指令:

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers">
        <option *ngFor="let user of lUsers" [ngValue]="user">
            {{user.Name}}
        </option>
    </select>

并且您的 ts 文件将捕获事件并接收 User 对象，而无需通过 id 跟踪它，基本上重用您的旧方法就足够了:

setNewUser(user: User): void {
    console.log(user);
    this.curUser = user;
    }

2020 年 6 月 16 日更新:

始终根据您的用例，您可能需要在此处使用方括号而不是圆括号:(ngModel)="lUsers。对于 OP 所述的特定情况，圆括号是正确的选择。可以在 Angular guru answer 的这个 Günter Zöchbauer 中找到关于方形/圆形和香蕉盒之间区别的清晰详细的描述