Angular AutoComplete 将值作为 [Object Object] 返回

Question

我的要求是在输入框中显示选定的值，并将选定的 Id 和值获取到 .ts 文件中。因为我需要 Id 和 Value，所以我将选项值直接绑定到 [value]。但是如果我这样做，它就会被打印为 [Object Object]。

<mat-form-field appearance="outline" class="w-100">
            <mat-label>Enter Hotel Name</mat-label>
            <input type="text" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectedclient($event)">
                <mat-option *ngFor="let option of clients; let i = index" [value]="option">
                    {{ option.name }}
                  </mat-option>
            </mat-autocomplete>
            <mat-icon matSuffix>location_on</mat-icon>
          </mat-form-field>

Ts文件

    options = [
        { id: 1, name: 'One'},
        { id: 2, name: 'Two'},
        { id: 3, name: 'Three'}
       ];

selectedclient(event) {
     console.log(event.option.value);
   }

Stackblitz 编辑器网址：https ://stackblitz.com/edit/angular-mat-select-data-n4tvmj

Answer 1

您想使用该displayWith属性。根据手册：

如果您希望选项的控件值（表单中保存的内容）与选项的显示值（文本字段中显示的内容）不同，则需要displayWith在自动完成元素上设置该属性。一个常见的用例可能是如果您想将数据另存为对象，但只显示选项的字符串属性之一。

要实现此功能，请在您的组件类上创建一个函数，将控件值映射到所需的显示值。然后将其绑定到自动完成的displayWith属性。

模板端

<mat-autocomplete ... [displayWith]="getOptionText">

脚本端

getOptionText(option) {
  return option.name;
}

演示：https : //stackblitz.com/edit/angular-mat-select-data-cddqia