我的要求是在输入框中显示所选值,并将选定的ID和值添加到.ts文件中。因为我需要Id和Value,我将选项值直接绑定到[value]。但是,如果我这样做,它将被打印为[对象对象]。
<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
您想要使用displayWith
属性。根据手册:
如果您希望选项的控件值(表单中保存的内容)与选项的显示值(文本字段中显示的内容)不同,则需要在自动完成元素上设置
displayWith
属性。一个常见的用例可能是您希望将数据保存为对象,但只显示选项的字符串属性之一。要使其工作,请在组件类上创建一个函数,该函数将控件值映射到所需的显示值。然后将其绑定到autocomplete的
displayWith
属性。
<mat-autocomplete ... [displayWith]="getOptionText">
getOptionText(option) {
return option.name;
}
但是:Kua zxsw指出