要在Angular的mat-autocomplete中显示选项名称而不是值,可以使用valueDisplayFn属性来定义一个函数,该函数将返回要显示的名称。
以下是一个示例代码:
import { Component } from '@angular/core';
@Component({
selector: 'app-autocomplete-example',
templateUrl: './autocomplete-example.component.html',
styleUrls: ['./autocomplete-example.component.css']
})
export class AutocompleteExampleComponent {
options = [
{ value: '1', name: 'Option 1' },
{ value: '2', name: 'Option 2' },
{ value: '3', name: 'Option 3' },
{ value: '4', name: 'Option 4' }
];
displayFn(option): string {
return option ? option.name : '';
}
}
{{ option.name }}
在上面的示例中,selectedOption是ngModel绑定的变量,它将保存用户选择的选项对象。 displayFn函数将在输入框中显示选项名称。
这样,当用户选择一个选项时,输入框将显示选项的名称,而不是选项的值。