如何在角度6的下拉列表中设置双向绑定数据？

Posted 2021-04-09

我有这样的数据。

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

在app中，我分别为show only user_id和name设置了两个下拉列表。

对于用户ID，我使用了简单的select和option。

对于name我使用过ngx-select-dropdown。

现在我必须进行双向绑定，当我选择Doe然后id下拉2将自动绑定。同样如果我选择id 1然后John将自动选择。

我的设计如下。

答案

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

用户model.ts

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;
  }
}

最后，根据您的设计，html代码基本上就像

<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，这样你就不需要继续相互更新了。

另一答案

我在reactive form group的帮助下解决了我的问题。它很容易为我提供价值，我在patchValue()功能的帮助下设置了它的形式值。它对我来说很好。