仅选择一个选项以 4 角显示 Id 而不是名称 [英] Selecting an option only Display Id not Name in angular 4

问题描述

I am working on Angular 4 Web API Here when selecting an option it will display packingtypename its working fine.但我的问题是当单击添加按钮时它只会保存我想要的包装类型 ID 包装类型 ID 和包装类型名称在这里我想在选择 PackingTypeName 时自动将它们的 ID 传递给 API.which means when selecting a packing type Name and press add button the selected Name and its ID can be saved to DB.实际上，我是角度的新手.任何人都可以帮忙请它对我有很大的帮助

I am working on Angular 4 Web API Here when selecting an option it will display packingtypename its working fine. but my problem is when clicking add button it will only save the packingtypeID i want Packing type id and packing type name Here i want to like this when selecting a PackingTypeName automatically pass their ID to API. which means when selecting a packing type Name and press add button the selected Name and its ID can be saved to DB. actually, I am new in angular. can anyone help please its a big help form me

我的 Html 代码是

my Html code is

  <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

推荐答案

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

create a new variable in ts files name - PackingItem = {};

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

in html file change value={{item.PackingTypeID}} to [value]="item"

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

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

Let me know if you have any doubt.

这篇关于仅选择一个选项以 4 角显示 Id 而不是名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！