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

时间：2018-10-13 14:44:34 阅读：839 评论：0 收藏：0 [点我收藏+]

标签：mem option .com hit for imp size inf items

效果如下图

技术分享图片

代码实现

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

标签：mem option .com hit for imp size inf items

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行