Html 保存并绑定到下拉选择的Id，但以角度材质显示值

这可能是一个愚蠢的问题，答案很简单，但经过一周的编码后，我觉得很累，无法理解

如何绑定到选择的Id，但显示值的字符串表示形式？也就是说，我有一个下拉列表，显示客户的姓名，但我想保存

Id

，以便数据库使用

我的选择项有两个属性：

customer.Display

（名称）和

customer.Id

我如何进行绑定以将我的Id保存到

[（ngModel）]=“loadDataService.selectedLoad.CustomerId

，但在下拉列表中显示我的显示（它已经显示了显示，因此已包括在内）：

<mat-form-field>
    <input type="text" placeholder="Customer Search" id="CustomerId" name="CustomerId" aria-label="Number" matInput [formControl]="myCustomerSearchControl"
      [matAutocomplete]="auto" [(ngModel)]="loadDataService.selectedLoad.CustomerId" (keyup)="onCustomerSearch($event)">
    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
      <mat-option *ngFor="let customer of customerArray" [value]="customer.Display">
        {{ customer.Display }}
      </mat-option>
    </mat-autocomplete>
</mat-form-field>

{{customer.Display}

当您使用自动完成时，您有一个

选项selected

事件。您需要使用该事件来查找所选选项

<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="setServiceId($event)">
  ...
</mat-autocomplete>

这种方法假设您有唯一的客户显示。如果没有，您将需要使用此功能，使用以前的HTML+此HTML：

setServiceId(customer: any) {
  this.loadDataService.selectedLoad.CustomerId = customer.id;
}

---

[value]=“customer.Display”

应该是

[value]=“customer.Id”

…除非那是别的，因为这看起来太容易了。当我绑定

[value]=“customer.Id”

时，它会显示那个值（Id）作为输入字段中的选定值。即，它显示GUID而不是用户友好的名称。我正在绑定到我的数据服务

[（ngModel）]=“loadDataService.selectedLoad.CustomerId“

与所选的值。但在我的设置中，它是

customer.Display

，而不是

customer.Id

。拉扯我的头发：啊，我看到你的问题了。让我开始工作，我会帮你处理的。谢谢！我真的很感激！：）感谢您提供的解决方案。我喜欢你的想法，我觉得很接近。我两种方法都试过，但第一种似乎都是。然而，我不得不做一些更改，因为我得到了一个错误：无法读取未定义的属性id。因此将这一行修改为：

constcustomer=this.customerArray.find（c=>c.Display==Display.option.value）但这也会更新我选择的下拉列表值，使其与Id相等。也就是说，它会将显示从客户名称更改为客户Id。这是因为您可以使用
[（ngModel）]=“loadDataService.selectedLoad.CustomerId”
将服务值直接绑定到输入。您应该在组件中创建一个变量，并使用
onSelected
输出，就像我向您展示的那样，来设置服务的值。Jip，算出了。我去掉了我的[（）]装订使它能用。德克萨斯州！
setServiceId(customer: any) {
  this.loadDataService.selectedLoad.CustomerId = customer.id;
}