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

Question

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

Answer 1

需要在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');
}

Answer 2

如果你的代码没有一些帮助，那就有点困难了，但是在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()操作符。