Question

这可能是一个非常简单的答案的愚蠢问题，但经过一周的编码后，我觉得很痛苦，无法弄清楚。

如何绑定选择的Id，但显示值的字符串表示？即，我有一个显示客户名称的下拉列表，但我想保存Id以用于数据库目的。

我的选择项目有两个属性：customer.Display（姓名）和customer.Id。

如何进行绑定以将我的ID保存到[(ngModel)]="loadDataService.selectedLoad.CustomerId，但在下拉列表中显示我的显示（它已经显示了显示，因此已涵盖）： < / p>

<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>

Answer 1

使用自动填充功能时，您会遇到optionSelected个事件。您需要使用它来查找所选的选项。

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

然后，在您的组件中，您必须实现该功能：

setServiceId(dislay: string) {
  const id = this.customerArray.find(c => d.Display === display).id;
  this.loadDataService.selectedLoad.CustomerId = id;
}

这种做法假设您拥有独特的客户展示。如果没有，您将需要使用此功能，使用之前的HTML +此HTML：

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

保存并绑定到下拉选区的ID，但显示角度材质中的值

1 个答案: