Angular 4-在选择列表中使用对象作为选项值 [英] Angular 4 - using objects for option values in a select list

问题描述

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

I know that similar questions have been asked, but I've found none with a good answer. I want to create a select list in an Angular form, where the value for each option is an object. Also, I do NOT want to use 2 way data binding. e.g. if my Component has these fields:

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

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

I would like my HTML template to contain this:

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

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

With this code, though, my setNewUser() function receives the contents of the selected user's Name field. Why it picks that specific field, I have no idea. What I expect is that it would receive the "value" of the selected option, which I specifically set to a user object.

请注意，我在选项中使用了ngValue而不是value.那是出于其他人关于SO的建议.如果我改用value，那么发生的事情是该对象被转换为字符串'[Object object]'，这是setNewUser()接收到的，这是没有用的.

Note that I used ngValue instead of value in the option. That was by suggestion of others on SO. If I use value instead, what happens is that the object gets converted to the string '[Object object]', which is what setNewUser() receives, which is useless.

仅供参考，我正在Windows 10上工作，将angular 4.0.0与@ angular/cli 1.1.2一起使用.这是setNewUser()方法:

FYI, I'm working on Windows 10, using angular 4.0.0 with @angular/cli 1.1.2. Here is the setNewUser() method:

    setNewUser(user: User): void {

    console.log(user);
    this.curUser = user;
    } // setNewUser()

我正在确定要传递给它的内容，既要记录它，又要在模板中包含它:<pre>{{curUser}}</pre>

I am determining just what exactly is being passed to it both my logging it, and also including this on the template: <pre>{{curUser}}</pre>

推荐答案

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

I'm currently using [ngValue] and it stores objects just fine.

有关为什么使用(change)而不是(ngModelChange)会遇到问题的说明可以在

The explanation as to why you experienced issues using (change) instead of (ngModelChange) can be found in this question

因此，由于您已经使用过[ngValue]，因此您可能想做这样的事情，在这里您将仅使用一种方式绑定才能使用ngModelChange指令:

So, since you've already used [ngValue], you probably want to do something like this, where you will only use one way binding in order to be able to use the ngModelChange directive:

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

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

And your ts file will capture the event and receive the User object without needing to track it by id, basically reusing your old method will be good enough:

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

更新2020年6月6日:

根据使用情况，您可能需要在这里使用方括号而不是圆形:(ngModel)="lUsers.对于OP所述的特殊情况，圆括号是正确的选择.可以从Angular大师的答案中找到有关方形/圆形和香蕉盒之间差异的清晰详细描述. href ="https://stackoverflow.com/users/217408/g%C3%BCnter-z%C3%B6chbauer">GünterZöchbauer

Always depending on your use case you may need to use square brackets instead of round here: (ngModel)="lUsers. For the particular case the OP stated, round brackets was the right choice. A clear and detailed description of the difference between square/round and banana box can be found in this answer from Angular guru Günter Zöchbauer

这篇关于Angular 4-在选择列表中使用对象作为选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！