要实现Angular Material多选下拉菜单,可以按照以下步骤进行操作:
ng add @angular/material
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
imports: [
MatSelectModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
FormsModule,
ReactiveFormsModule
]
选择选项
{{ option.label }}
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent {
options = [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' },
];
selectedOptions = new FormControl();
}
这样,你就可以在Angular应用程序中使用Angular Material的多选下拉菜单了。用户可以通过勾选多个选项来进行选择。