Angular 通过选择下拉选项输出对象值

我正在angular 7中构建一个反应形式，我想做的是： 1.从“名称”下拉列表中选择一个用户； 2.在“用户名”部分（）下自动显示属于该用户的用户名； 3.提交表单时，我只想发送所选用户的id

我目前的方法适用于第1步和第2步，我现在唯一的问题是，我将对象“user”绑定到[ngValue]，而不仅仅是id，这导致我最终提交了用户的所有详细信息，而不仅仅是id。显然，我应该停止在被动表单上使用ngModelChange

我不确定是否有办法解决这个问题。如果我使用“user.id”作为值，我将无法再访问用户名（或用户的其他详细信息）

我看到了一些ngModel和ngModelChange的示例，但根据angular文档，“angular v6中不推荐使用ngModel输入属性和ngModelChange事件以及反应式表单指令，angular v7中将删除这些支持。”

对于我使用的数据

html

您可以尝试以下方法：

<select class="form-control" formControlName="name" [ngModel]="selectUser" name="selectUser" (ngModelChange)="selectUser($event)">

编辑：

错误在

[ngValue]

中：

{{user.name}}

您需要将用户id放在ngValue中，而不是用户对象中。您可以尝试以下操作：

<select class="form-control" formControlName="name" [ngModel]="selectUser" name="selectUser" (ngModelChange)="selectUser($event)">

编辑：

错误在

[ngValue]

中：

{{user.name}}

您需要将用户id放在ngValue中，而不是用户对象中，请尝试以下操作：

<select class="form-control" 
      formControlName="name" 
      (change)="selectUser()">
<option *ngFor="let user of users"  
        [ngValue]="user">{{ user.name }}</option>
  </select>

试试这个：

<select class="form-control" 
      formControlName="name" 
      (change)="selectUser()">
<option *ngFor="let user of users"  
        [ngValue]="user">{{ user.name }}</option>
  </select>

---

绑定到

上的

更改

事件。我没有将

$event

作为参数传递，所选选项值可从分配给

@headrush的

窗体控件中获得。谢谢您的回答。您的提案仍然要求[ngValue]与对象（用户）相等，对吗？因为这是我现在的主要问题。当我想提交表单时，我只想使用选项的id作为值，而不是整个对象，所以我现在不知道如何解决这个问题。如果我使用[ngValue]=“user”我不能只提交所选选项的id-如果我使用[ngValue]=“user.id”我无法获得用户的其他详细信息（或者我不知道如何）。绑定到
上的
更改
事件。我没有将
$event
作为参数传递，所选选项值可从分配给
@headrush的
窗体控件中获得。谢谢您的回答。您的提案仍然要求[ngValue]与对象（用户）相等，对吗？因为这是我现在的主要问题。当我想提交表单时，我只想使用选项的id作为值，而不是整个对象，所以我现在不知道如何解决这个问题。如果我使用[ngValue]=“user”我不能只提交所选选项的id-如果我使用[ngValue]=“user.id”我无法获取用户的其他详细信息（或者我不知道如何）。感谢您的回答，但这与我的代码具有相同的结果。我的问题是，当我提交表单时，我得到的是完整对象，而不是只选择选项的id，因为我将“user”绑定到[ngValue]，而不是仅仅“user.id”。不幸的是，如果我只使用“user.id”，我就无法访问*ngFor.i之外的用户名。我得到一个错误“模板解析错误：解析器错误：得到插值（{{}}），其中表达式应该位于[{{user.id}]“[ngValue]=“user.id”…中的第0列，现在必须工作。。我编辑我的答案谢谢你的回答，但这与我的代码的结果相同。我的问题是，当我提交表单时，我得到的是完整对象，而不是只选择选项的id，因为我将“user”绑定到[ngValue]，而不是仅仅“user.id”。不幸的是，如果我只使用“user.id”，我就无法访问*ngFor.i之外的用户名。我得到一个错误“模板解析错误：解析器错误：得到插值（{{}}），其中表达式应该位于[{{user.id}]“[ngValue]=“user.id”…中的第0列，现在必须工作。。我编辑我的答案
<select class="form-control" 
      formControlName="name" 
      (change)="selectUser()">
<option *ngFor="let user of users"  
        [ngValue]="user">{{ user.name }}</option>
  </select>

userID: number;
userName: string;

selectUser = () => {
   const user = this.addUser.get('name').value;
   this.userId = user.id;
   this.userName = user.name
};