要创建带有分组和子分组的选择框,你可以使用Angular 9的ng-select
库。以下是一个示例代码,展示了如何实现这个功能:
ng-select
库:npm install ng-select --save
NgSelectModule
:import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({
imports: [
// ...
NgSelectModule
],
// ...
})
export class YourModule { }
ng-select
来创建选择框。在选择框的items
属性中,你可以提供一个数组,包含所有的选项和分组信息。
selectItems
数组和selectedItems
数组,并在ngOnInit
方法中初始化它们。selectItems
数组包含所有的选项和分组信息。export class YourComponent implements OnInit {
selectItems: any[] = [];
selectedItems: any[] = [];
ngOnInit() {
this.selectItems = [
{ name: 'Option 1', group: 'Group 1' },
{ name: 'Option 2', group: 'Group 1' },
{ name: 'Option 3', group: 'Group 2' },
{ name: 'Option 4', group: 'Group 2' },
{ name: 'Option 5', group: 'Group 3' },
{ name: 'Option 6', group: 'Group 3' }
];
}
}
这样,你就可以创建一个带有分组和子分组的选择框了。用户可以选择多个选项,并且选项会根据它们的分组进行分组显示。