您可以使用Angular Material提供的MatSelect组件和MatMenuTrigger指令来实现带有添加功能的选择列表。以下是一个示例代码:
在HTML模板中:
{{ option }}
在组件中:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent {
selectedOption: FormControl = new FormControl('');
options: string[] = ['Option 1', 'Option 2', 'Option 3'];
newOption: string = '';
addOption() {
if (this.newOption && !this.options.includes(this.newOption)) {
this.options.push(this.newOption);
this.selectedOption.setValue(this.newOption);
this.newOption = '';
}
}
}
在上述示例中,我们使用MatSelect
组件来显示选择列表,并使用MatMenuTrigger
指令将添加按钮与下拉菜单关联起来。当用户点击添加按钮时,会弹出一个包含输入框和添加按钮的下拉菜单。用户在输入框中输入新选项,并点击添加按钮时,会调用addOption()
方法将新选项添加到选择列表中。
请确保在使用此示例之前已经安装了Angular Material和Angular Forms模块,并将其导入到需要使用的模块中。