要在Angular Material中实现选择和输入在同一个字段内的功能,可以使用MatAutocomplete组件和MatInput组件结合使用。
首先,确保在你的Angular项目中已经安装了Angular Material,并将其导入到你的模块中。
在HTML模板中,你可以使用MatInput组件作为输入字段,并使用MatAutocomplete组件作为自动完成下拉菜单。将MatInput组件的value绑定到一个变量,用于存储用户的输入。同时,将MatAutocomplete组件的options属性绑定到一个列表,用于显示可选项。
{{ option }}
在组件的类中,定义一个变量用于存储用户的输入和可选项列表。
import { Component } from '@angular/core';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
selectedValue: string;
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
constructor() { }
}
这样,用户既可以选择下拉菜单中的选项,也可以手动输入内容。用户输入的内容将存储在selectedValue变量中。
你可以根据自己的需求对这个示例进行修改和扩展。