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

Posted 2023-03-05

【中文标题】仅选择一个选项在角度 4 中显示 Id 而不是名称

【英文标题】：Selecting an option only Display Id not Name in angular 4

【发布时间】：2019-12-14 15:28:27

【问题描述】：

我正在使用 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

【参考方案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 方法的示例。不要打电话和堆叠，偷看。

【讨论】：

但我收到警报“[object Object]”没有数据来

item.PackingtypeName 像这样。 ....

不要忘记在值周围添加括号，例如：[value]="item"。因为你要执行对象绑定。

@SebastianMünster 相同的“[object Object]”

尝试使用控制台日志并检查 plz。因为它可能是 json 对象，如果您想查看警报值，则需要进行字符串化。在控制台日志中您将了解。

【参考方案2】：

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

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

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

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

【讨论】：

add ngModel in select <select class="form-control" id="PackingtypeName" placeholder="name" name="PackingtypeName" (change)="onSelect($event.target.value)" [(ngModel)]="selecteItem"> 然后在 addItem() 你可以像这样传递这个值 addItems(selecteItem) 请检查给定的 url 并检查控制台中的值。 stackblitz.com/edit/angular-y6ydv4

将检查并在表单中

那是因为你还没有选择任何值，先选择任何值。当前默认选项已禁用。

那是什么问题？

让我们continue this discussion in chat。