Question

我有一个创建页面，用户可以从<mat-autocomplete>中选择一个项目。我有一个编辑页面，我想要预先选择用户选择的选项。

Answer 1

如果您的代码没有一些帮助，有点难以帮助您，但请使用material.angular.io网站上的示例。

filteredOptions: Observable<string[]>;

ngOnInit() {
      this.filteredOptions = this.myControl.valueChanges
         .startWith(null)
         .map(val => val ? this.filter(val) : this.options.slice()); }

filter(val: string): string[] {
  return this.options.filter(option =>
    option.toLowerCase().indexOf(val.toLowerCase()) === 0); }

您可以将用户预先选择的值传递给 .startWith（）运算符。

Answer 2

需要在html input元素上分配一个FormControl对象，如下图。然后在 TS 文件中你可以调用 FormControl 对象上的 setValue 来设置一个初始值。

*.HTML file ->
<input matInput [formControl]="myControl" [matAutocomplete]="auto">

*.TS file ->
 myControl = new FormControl();
 ngOnInit(): void {
     this.myControl.setValue('value to pre-select');
}

如何在mat-autocomplete中预先选择一个选项

2 个答案: