html - 仅选择一个选项以角度 4 显示 Id 而不是名称
问题描述
我正在使用 Angular 4 Web API Here 选择一个选项时,它会显示 packingtypename 它的工作正常。但我的问题是,当单击添加按钮时,它只会保存我想要的包装类型 ID 包装类型 ID 和包装类型名称在这里我想在选择 PackingTypeName 时自动将其 ID 传递给 API。这意味着在选择包装类型名称并按添加按钮时,可以将所选名称及其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
解决方案
在 ts 文件名中创建一个新变量 -PackingItem = {};
在 html 文件中更改value={{item.PackingTypeID}}
为[value]="item"
然后在addItem()
方法检查中console.log(this.PackingItem);
如果您有任何疑问,请告诉我。
推荐阅读
- java - @ManyToOne 没有在 Child 表中保留 Parent FKey 列
- javascript - 如何处理对客户端反应应用程序的外部重定向?
- javascript - 为什么 .indexof() 返回 -1;当项目存在于给定数组中时?| 谷歌脚本
- mysql - MySQL 在另一个查询中使用查询
- symfony4 - 如何将 hydra apiplatform 文档转换为 Swagger 规范 (OAS3)?
- sql-server - 我的数据库中的数据显示为问号
- flutter - 在构建函数之外使用 BuildContext
- ruby-on-rails - 使用外键作为复合键的一部分
- sql - 每天将数据从一个 SQL Server 数据库复制到另一个 SQL 数据库
- python - Python 3.7 NMAP 脚本