首页 文章

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

提问于
浏览 次
21

我知道有类似的问题已被提出，但我找不到一个好的答案 . 我想以Angular形式创建一个选择列表，其中每个选项的值是一个对象 . 另外，我不想使用2路数据绑定 . 例如如果我的Component有这些字段：

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（）接收的，这是无用的 .

仅供参考，我正在使用角度4.0.0和@ angular / cli 1.1.2在Windows 10上工作 . 这是setNewUser（）方法：

setNewUser(user: User): void {

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

我正在确定究竟是什么传递给它我的记录它，还包括在模板上： <pre>{{curUser}}</pre>

angular angular-forms

3 回答

  • 17

    我目前正在使用 [ngValue] 并且存储对象就好了 .

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

    所以，既然你已经使用了 [ngValue] ，你可能想要做这样的事情，你只能使用单向绑定才能使用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;
    }
    回复于
  • 3

    由于 option 标签的 value 属性无法存储整个对象，因此我们将在 lUsers 数组中创建一个新属性 id 以跟踪所选项目 .

    HTML：

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

    这将在更改时将唯一的 id 传递给我们的 setNewUser 函数 .

    在你的component.ts中：

    ...

lUsers: any[] = [
    { id: 1, Name: 'Billy Williams', Gender: 'male' },
    { id: 2, Name: 'Sally Ride', Gender: 'female'}
];
curUser: any = this.lUsers[0]; // first will be selected by default by browser

...

setNewUser(id: any): void {
    console.log(id);
    // Match the selected ID with the ID's in array
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id));
    console.log(this.curUser);
}

    这是上面代码的plnkr演示 . 打开开发人员工具以查看控制台日志 .

    回复于
  • 31

    您可以在-Elements上使用[ngValue]而不是[value] . 这个对我有用 .

    我在这里找到了这些信息：https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

    回复于

相关问题