Html 选择仅显示Id而不显示名称的选项，角度4

我在这里使用Angular 4 Web API，当选择一个选项时，它将显示packingtypename它的工作状态良好。但我的问题是，当点击add按钮时，它只会保存packingtypeID。我想在这里保存packingtypeID和PackingTypeName。当选择PackingTypeName时，我想这样自动将其id传递给API。这意味着当选择包装类型名称并按add按钮时，所选名称及其ID可以保存到DB。事实上，我是新来的。有人能帮忙吗我帮了大忙

我的Html代码是

  <label>Packing Type</label>
  <select class="form-control" id="PackingtypeName" placeholder="name" name="PackingtypeName" (change)="onSelect($event.target.value)" *ngIf="products">
   <option value="0" disabled>Please Select Packing type </option>
   <option *ngFor="let item of products" id={{item.PackingTypeID}} value={{item.PackingTypeID}}>{{item.PackingtypeName}}</option>
 </select>


<input type="button" value="Add Item"[disabled]="!itemdetails"  class="btn btn-success" (click)="addItems(newStockoutForm.value);newStockoutForm.reset()" />

---

您的选项值中的任何内容都是您将在select上获得的内容

现在，只需将其设置为ID，但如果需要，可以将该值设置为整个对象

<option *ngFor="let item of products" id="{{item.PackingTypeID}}" [value]="item">{{item.PackingtypeName}}</option>

（假设您的DTO是

打包类型

类型-我看不到任何与您使用的确切类型相关的引用。但我想

任何

都可以。无论哪种方式，该对象都将是实际的项目对象）

---

编辑：添加了完整的选项行，包括提到的值的[input]修复，以及更新的onSelect方法示例。不要打电话和堆叠，偷看。

在ts文件名中创建一个新变量-

PackingItem={}

在html文件中，将
value={{{item.PackingTypeID}}
更改为
[value]=“item”

然后在
addItem（）
方法中检查
console.log（this.PackingItem）

如果您有任何疑问，请告诉我。
但是我收到了警报“[object object]”没有像这样的数据{{item.PackingtypeName}}。……不要忘记在值周围添加括号，如：[value]=“item”。因为您想执行对象绑定。@SebastianMünster same“[object object]”请尝试控制台日志并检查plz。因为它可能是json对象，所以如果您想看到值处于警报状态，则需要将其字符串化。在控制台日志中，您将了解。在选择中添加
ngModel
，然后在
addItem（）
中，您可以像这样传递此值
addItems（selecteItem）
请检查给定的url并在控制台中检查值。将进行检查，在表单中，这是因为您尚未选择任何值，请先选择任何值。当前默认选项已禁用。那么问题是什么？让我们来看看。
<option *ngFor="let item of products" id="{{item.PackingTypeID}}" [value]="item">{{item.PackingtypeName}}</option>

onSelect(item: PackingType) {
  alert(`ID: ${item.PackingTypeID} - Name: ${item.PackingtypeName}`);
}