要以编程方式设置Angular mat-autocomplete的活动项目,您可以使用MatAutocompleteSelectedEvent事件。以下是一个示例:
在HTML模板中,您需要配置mat-autocomplete,并将其绑定到一个FormControl:
{{ option }}
在组件类中,您需要初始化FormControl,并为MatAutocompleteSelectedEvent事件添加一个处理函数来设置活动项目:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@Component({
selector: 'app-autocomplete',
templateUrl: './autocomplete.component.html',
styleUrls: ['./autocomplete.component.css']
})
export class AutocompleteComponent {
myControl = new FormControl();
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
onOptionSelected(event: MatAutocompleteSelectedEvent) {
// 设置活动项目
this.myControl.setValue(event.option.value);
}
}
现在,当用户选择一个选项时,onOptionSelected函数将被调用,并将选项的值设置为FormControl的值,从而设置活动项目。
请注意,以上示例假设您已经在模块中导入了MatAutocompleteModule和FormsModule,并且已经在组件类中使用了FormControl和MatAutocompleteSelectedEvent。