Angular 自动完成正在以 [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 编辑器URL： https://stackblitz.com/edit/angular-mat-select-data-n4tvmj

Answer 1

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

If you want the option's control value (what is saved in the form) to be different than the option's display value (what is displayed in the text field), you'll need to set the displayWith property on your autocomplete element. A common use case for this might be if you want to save your data as an object, but display just one of the option's string properties.

To make this work, create a function on your component class that maps the control value to the desired display value. Then bind it to the autocomplete's displayWith property.

模板端

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

脚本端

getOptionText(option) {
  return option.name;
}

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

Angular 自动完成正在以 [Object Object] 形式返回值

Angular AutoComplete is returning value as [Object Object]

angular

angular-material-6

模板端

脚本端