（Angular Material）用Autocomplete打造带层级分类的DropDown

时间：2018-10-13 14:29:15 阅读：423 评论：0 收藏：0 [点我收藏+]

效果如下图

技术分享图片

代码实现

1、导入模块

　import {MatAutocompleteModule} from ‘@angular/material/autocomplete‘;

　@NgModule({
　 imports:[
　 MatAutocompleteModule
　 ]
　})

２、编写List内容

 this.memberNameList = [
　　 {
 　　　　onOffDist: ‘オン‘,
　　　　 items: [‘丁１‘, ‘徐２‘, ‘僑３‘]
　　 },
　　 {
　　　　 onOffDist: ‘オフ‘,
　　　　 items: [‘趙４‘, ‘李５‘]
　　 }
 ];

３、html实现

 <input type="text" name="memberName" matInput formControlName="memberName"
 [matAutocomplete]="memberName"
 [value]="costData.teamMember"/>
　　 <mat-autocomplete style="font-size:12px; height: 30px;" #memberName="matAutocomplete">
　　　　 <mat-optgroup *ngFor="let nameList of memberNameList" [label]="nameList.onOffDist">
　　　　　　 <mat-option style="font-size:12px; height: 30px;" *ngFor="let name of nameList.items"
　　　　　　　　 [value]="name">
　　　　　　　　 {{ name }}
　　　　　　 </mat-option>
　　　　 </mat-optgroup>
 </mat-autocomplete>
 
完成。

（Angular Material）用Autocomplete打造带层级分类的DropDown

原文：https://www.cnblogs.com/nliao/p/9782652.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)