仅选择一个选项在角度 4 中显示 Id 而不是名称

Question

我正在使用 Angular 4 Web API 在这里选择一个选项时，它会显示 packingtypename 它工作正常。但我的问题是，当单击添加按钮时，它只会保存我想要的包装类型 ID 包装类型 ID 和包装类型名称在这里我想在选择 PackingTypeName 时自动将其 ID 传递给 API。哪种意味着选择打包类型名称并按Add Button所选名称及其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()" />

我的 TS 文件

  addItems(value: any) {
 this.items = new IComboDetails(this.PackingTypeID, value.PackingtypeName, );

    console.log(this.PackingTypeID);
    alert(this.PackingTypeID);
    alert(value.PackingtypeName);// here show alert is PackingTypeID 
}

   onSelect(PackingTypeID: number) {
    alert(PackingTypeID);
    this._loginService.selectedpackingtypeid = PackingTypeID;
    this.PackingTypeID = PackingTypeID

Answer 1

无论您选择的价值是什么，您都会在选择时得到什么。

现在，您仅将其设置为 ID，但您可以根据需要将值设置为整个对象。

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

这将为您提供在选择时使用的整个项目，而不是单个值。

您的 onSelect 现在将如下所示：

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

（假设您的 DTO 是 PackingType 类型 - 我没有看到对您正在使用的确切类型的任何引用.. 但我猜 any 会这样做。无论哪种方式，对象都将是实际项目对象）。

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

Answer 2

在 ts 文件名中创建一个新变量 - PackingItem = {};

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

然后在addItem()方法中检查console.log(this.PackingItem);

如果您有任何疑问，请告诉我。