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

发布时间：2020-12-17 07:04:55 所属栏目：安全来源：网络整理

导读：效果如下图 ? 代码实现 1、导入模块 import {MatAutocompleteModule} from ‘@angular/material/autocomplete‘; @NgModule({ ?? imports:[ ??? ?? MatAutocompleteModule ? ? ] }) ２、编写List内容 this . memberNameList = [ { onOffDist: ‘オン‘ , ite

效果如下图

代码实现

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> 
 
   ? 
 
  完成。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!