如何在angular 6的下拉列表中设置双向绑定数据? [英] How to set two way binding data in dropdown in angular 6?

问题描述

我有这样的数据.

<预><代码>[{用户 ID":1，姓名":约翰"},{"user_id": 2,"name": "母鹿"},...]

在应用程序中，我设置了两个下拉菜单，分别只显示 user_id 和 name.

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

对于name，我使用了ngx-select-dropdown.

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

我有一个像下面这样的设计.

解决方案

我在 reactive form group 的帮助下解决了我的问题.它很容易为我提供价值，并且我在 patchValue() 功能的帮助下设置了它的表单值.对我来说效果很好.

I have a data like this.

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

In app, I have set two dropdown for show only user_id and name respectively.

For user id I have used simple select and option.

For name I have used ngx-select-dropdown.

Now I have to make two way binding, when I select Doe then id dropdown 2 will automatically bind. Same way if I choose id 1 then John will autimatically select.

I have a design like below.

解决方案

I have solved my issue with the help of reactive form group. It provides me value easily and I have set it's form value with the help of patchValue() feature. And it works fine for me.

这篇关于如何在angular 6的下拉列表中设置双向绑定数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！