Как установить двухстороннее связывание данных в раскрывающемся списке в угловых 6? - PullRequest
Новая
       27

Как установить двухстороннее связывание данных в раскрывающемся списке в угловых 6?

0 голосов
/ 20 декабря 2018

У меня есть такие данные. 

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

В приложении я установил два раскрывающихся списка для отображения только user_id и имени соответственно.

Для идентификатора пользователя я использовал простые select и option.

Для name Я использовал ngx-select-dropdown.

Теперь мне нужно выполнить двухстороннее связывание, когда я выберу Doe, тогда выпадающий список id 2 автоматически свяжется.Таким же образом, если я выберу идентификатор 1, тогда John выберет автоматически.

У меня есть дизайн, как показано ниже.

enter image description here

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Я решил свою проблему с помощью reactive form group.Это дает мне значение легко, и я установил его значение формы с помощью функции patchValue().И это прекрасно работает для меня.

0 голосов
/ 21 декабря 2018

Для динамического создания раскрывающегося списка на основе приведенных выше данных создайте модель.

User-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 в формате списка, чтобы вам не приходилось обновлять друг друга.

...