创建带分组的Angular 2多选下拉列表可以通过以下步骤实现:
<mat-form-field>
<mat-select [(ngModel)]="selectedOptions" multiple>
<mat-select-trigger>
{{ selectedOptions.length }} options selected
</mat-select-trigger>
<mat-optgroup *ngFor="let group of options" [label]="group.name">
<mat-option *ngFor="let option of group.options" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
import { Component } from '@angular/core';
@Component({
selector: 'app-multi-select-dropdown',
templateUrl: './multi-select-dropdown.component.html',
styleUrls: ['./multi-select-dropdown.component.css']
})
export class MultiSelectDropdownComponent {
selectedOptions: string[] = [];
options = [
{
name: 'Group 1',
options: [
{ name: 'Option 1', value: 'option1' },
{ name: 'Option 2', value: 'option2' },
{ name: 'Option 3', value: 'option3' }
]
},
{
name: 'Group 2',
options: [
{ name: 'Option 4', value: 'option4' },
{ name: 'Option 5', value: 'option5' },
{ name: 'Option 6', value: 'option6' }
]
}
];
}
<app-multi-select-dropdown></app-multi-select-dropdown>
通过以上步骤,就可以创建一个带分组的Angular 2多选下拉列表。用户可以通过选择选项来进行多选操作,并且选中的选项数量会实时显示在下拉列表的触发器中。
推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它提供了云端一体化开发平台,支持前端开发、后端开发、数据库、存储等多种功能,可以帮助开发者快速构建和部署应用。详情请参考:腾讯云云开发产品介绍。
领取专属 10元无门槛券
手把手带您无忧上云