下拉显示值填充在模式的 id 属性中，而不是 Angular 中的实际 id

Posted 2023-03-09

【中文标题】下拉显示值填充在模式的 id 属性中，而不是 Angular 中的实际 id

【英文标题】：Dropdown display value getting populated in the id property of the mode instead of actual id in Angular

【发布时间】：2020-11-27 08:24:30

【问题描述】：

我已经在我的 Angular 应用程序中实现了一个正确填充的下拉菜单，但是当我尝试提交我的表单时，它在模型中显示了显示文本而不是 Id。可能是什么问题呢 据我所知，我只需要

[(ngModel)]="newJob.customerId

用户界面

<label for="customer">Customer</label>
  <select name="customer" required #customer="ngModel" ngModel placeholder="Please select"   [(ngModel)]="newJob.customerId">
    <option [ngValue]="undefined" selected>Please select</option>
    <option *ngFor="let customer of customers"  >customer.name </option>
  </select>
  <small *ngIf="customer.invalid">Please select a customer</small>

组件

  public createJob(form: NgForm): void 
    if (form.invalid) 
      alert('form is not valid');
     else 
      console.log(this.newJob);
      this.jobService.CreateJob(this.newJob).then(() => 
        this.jobService.GetJobs().subscribe(jobs => this.jobs = jobs);
      );
    
  

型号

export interface JobModel 
  jobId: number;
  engineer: string;
  customerId: number;
  customerName: string;
  when: Date;

更新

Uncaught (in promise): HttpErrorResponse: "headers":"normalizedNames":,"lazyUpdate":null,"status":400,"statusText":"Bad Request","url":"http://localhost:63235/job","ok":false,"name":"HttpErrorResponse","message":"Http failure response for http://localhost:63235/job: 400 Bad Request","error":"type":"https://tools.ietf.org/html/rfc7231#section-6.5.1","title":"One or more validation errors occurred.","status":400,"traceId":"|9e7e208d-44c84ff36cde4107.","errors":"$.customerId":["The JSON value could not be converted to System.Int32. Path: $.customerId | LineNumber: 0 | BytePositionInLine: 50."]

【问题讨论】：

你能分享你的customers数组吗？

【参考方案1】：

您需要在 select 内的每个选项上设置一个值，否则默认为显示值。 试试这个：

<option *ngFor="let customer of customers" [value]="customer.customerId">customer.name </option>

【讨论】：

对象包含以下值 customerId：“customer.customerId”

【参考方案2】：

来自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

价值

如果选择此选项，此属性的内容表示要与表单一起提交的值。 如果这个属性是 省略，取值来自选项的文本内容 元素。

因此，您必须为您的<option> 标签提供价值：

<option *ngFor="let customer of customers" [value]="customer.customerId">
                                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  customer.name
</option>
                                           

如果您在服务器端进行严格验证，要求 newJob.customerId 成为 数字，那么您应该使用 ngValue ，否则您将得到它作为字符串：

<option *ngFor="let customer of customers" [ngValue]="customer.customerId">

【讨论】：

我可以使用您的逻辑看到正确的值，但收到错误 "$.customerId":["JSON 值无法转换为 System.Int32。路径：$.customerId | LineNumber: 0 | BytePositionInLine: 50。"]

***.com/questions/57626878/…

@jacob ，你为什么说使用了错误的属性 customer.name。客户对象是组件中填充以显示在下拉列表中的内容。

newJob 是 JobModel 的一个对象，需要在客户端 UI 上填充并提交

@Tom 我没这么说。我的回答中最重要的是[value]="customer.customerId"。这实际上与@yurzui 的答案相同。您仍然希望客户名称是下拉菜单中显示的内容吗？这就是 customer.name 所做的。