代码之家 › 专栏 › 技术社区 › Sachin Shah

如何在angular 6的下拉列表中设置双向绑定数据?

dropdown bind angular6

Sachin Shah · 技术社区 · 7 年前

[
   {
       "user_id": 1,
       "name": "John"   
   },
   {
       "user_id": 2,
       "name": "Doe"   
   },
   ...
]

在应用程序中,我为仅显示用户id和名称分别设置了两个下拉列表。

对于用户id,我使用了simple select 和 option

对于 name 我用过 ngx-select-dropdown .

现在我必须进行双向绑定,当我选择 Doe 2 将自动绑定。如果我选择id也是一样的 1 然后 John 将自动选择。

我有一个如下的设计。

2 回复 | 直到 7 年前

MLam 7 年前

要根据上述数据动态生成下拉列表,请创建一个模型。

用户模型

export class UserModel {
    user_id: number;
    name: string; }

在 组成部分 ,它看起来像这样

import { UserModel } from '../app/model/user-model';

curr_name: string = '';
curr_user_id: number = null;
users: UserModel[] = 
[
  {
    "user_id": 1,
    "name": "John"
  },
  {
    "user_id": 2,
    "name": "Doe"
}];

getName(id: any): void {
  if (id !== 'SELECT') { // SELECT is used for default here
    this.curr_name = this.users.find(x => x.user_id == id).name;
  }
}

getUserId(name: any): void {
  if (name !== 'SELECT') {
    this.curr_user_id = this.users.find(x => x.name == name).user_id;
  }
}

最后,根据您的设计代码基本上看起来像

<select (change)="getName($event.target.value)">
  <option>SELECT</option>
  <option *ngFor="let user of users" [ngValue]="user.user_id" 
      [selected]="user.user_id === curr_user_id">
    {{user.user_id}}
  </option>
</select>

<select (change)="getUserId($event.target.value)">
  <option> SELECT</option>
  <option *ngFor="let user of users" [ngValue]="user.name" 
     [selected]="user.name === curr_name">
   {{user.name}}
  </option>
</select>

不过,既然您正在更新两个下拉列表,为什么不只创建一个下拉列表并使用 user-id name 以列表格式,这样您就不需要不断更新彼此。