如何在Angular的ngModel中传递两个属性？答案

【问题标题】：How to pass two properties in ngModel in Angular?如何在Angular的ngModel中传递两个属性？
【发布时间】：2020-09-11 07:50:26
【问题描述】：

您好，我正在开发 Angular 7 项目。我想在 if 条件下发送 id 到 API 请求和文本。

示例如下：

[{id: 2, text: 'upper'},{id: 3, text: 'Lower'} ]

在这里我想在我的 if 条件中使用文本，并且我将所有这些值推送到我的类中的一个对象

这是我的 HTML：

   <select class="form-control" name="objtype" [(ngModel)]="obj.text" (change)="changedropdown()" required>

对于请求，我只能发送文本，因为我使用的是 [(ngModel)]="obj.text" ，现在我想在没有 ngModel 的情况下向请求发送 id。有什么解决办法吗？ TIA。

【问题讨论】：

应该像把[(ngModel)]的值改成obj.id一样简单。你到底在问什么？
我知道，但我要问的是不改变我已经提到的 ngModel 我只想将 id 发送到 API 请求。
@Yakub，您的问题并没有说仅 id。不要在评论中而不是在问题中添加修订。实际上，您的问题的标题是“如何传递两个属性”。

标签： javascript angular angular8 angular9

【解决方案1】：

这样做的技巧是使用将对象绑定到<select> 的ngModel 和每个<option> 的ngValue，通过compareWith 自定义基于id 的相等性比较。

component.html

<select [(ngModel)]="selected" [compareWith]="compareById">
  <option *ngFor="let option of options" [ngValue]="option">
     {{option.text}}
  </option>
</select>

component.ts

options = [
  {id: 2, text: 'upper'},
  {id: 3, text: 'Lower'}
];

selected: {id: number, text: string} | undefined;

compareById = <T extends {id: number}>(x: T, y: T) => x.id === y.id;

【讨论】：