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

效果如下图

 

代码实现

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>

 

完成。