以下是使用Angular Material实现自动完成功能的示例代码:
首先,确保已经安装了Angular Material库。在终端中运行以下命令:
npm install @angular/material
在您的Angular组件文件中,导入所需的模块和服务:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
在组件类中定义一个FormControl和一个包含所有选项的数组:
@Component({
selector: 'app-autocomplete',
templateUrl: './autocomplete.component.html',
styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent {
// FormControl用于绑定输入框的值
myControl = new FormControl();
// 所有选项的数组
options: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
// 用于过滤选项的Observable
filteredOptions: Observable;
constructor() {
// 使用FormControl的值来过滤选项
this.filteredOptions = this.myControl.valueChanges.pipe(
startWith(''), // 初始值为空
map(value => this.filterOptions(value)) // 过滤选项
);
}
// 过滤选项的函数
filterOptions(value: string): string[] {
const filterValue = value.toLowerCase();
return this.options.filter(option => option.toLowerCase().startsWith(filterValue));
}
// 当选项被选中时,触发此函数
optionSelected(event: MatAutocompleteSelectedEvent): void {
console.log(event.option.value); // 输出选中的选项
}
}
在组件模板文件中,使用Angular Material的自动完成组件来实现输入框和选项列表:
{{ option }}
这样,当您在输入框中输入值时,只有以输入的值开头的选项将显示在下拉列表中。