这个问题通常是由于没有正确使用MatAutocomplete组件的导致的。在MatInput元素上使用MatAutocomplete后,您必须将MatAutocomplete的数据源与MatInput元素绑定,并为选项设置value、displayValue和optionSelected事件处理程序。
以下是一个示例代码片段,说明如何正确使用MatAutocomplete:
{{ option.name }}
注意:在上面的示例代码中,过滤选项是从异步源获取的。如果您的选项是静态的,则不需要使用异步框架。
在组件中,需要为MatInput元素创建一个表单控件,并使用MatAutocomplete组件的该控件为DataSoure设置过滤器。然后,定义一个选项选择事件处理程序,以接受已选择的值。
import { Component, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";
import { Observable } from "rxjs";
import { startWith, map } from "rxjs/operators";
@Component({
selector: "app-my-component",
templateUrl: "./my-component.component.html",
styleUrls: ["./my-component.component.css"]
})
export class MyComponentComponent implements OnInit {
myControl = new FormControl();
options = [
{ id: 1, name: "Option 1" },
{ id: 2, name: "Option 2" },
{ id: 3, name: "Option 3" }
];
filteredOptions: Observable;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(""),
map(value => this._filter(value))
);
}
private _filter