效果如下图

代码实现

1、导入模块

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

 @NgModule({
     imports:[
         MatAutocompleteModule
     ]
 })

2、编写List内容

this.memberNameList = [
   {
    onOffDist: 'オン',
     items: ['丁1', '徐2', '僑3']
   },
   {
     onOffDist: 'オフ',
     items: ['趙4', '李5']
   }
];

3、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的更多相关文章

  1. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  2. Angular 2 to Angular 4 with Angular Material UI Components

    Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...

  3. Angular Material 的设计之美

    前言 Angular Material 作为 Angular 的官方组件库,无论是设计交互还是易用性都有着极高的质量.正如官方所说其目的就是构建基于 Angular 和 Typescript 的高质量 ...

  4. 手势模型和Angular Material的实现

    iPhone的出现让手势操作大为流行,也使得手势编程成为开发人员的挑战. 拟物设计也把手势编程纳入在内,大概也想制定一个在交互模型标准.现阶段因为MD还在预发布阶段,因此还只实现了单点手势(一个指头) ...

  5. Material使用11 核心模块和共享模块、 如何使用@angular/material

    1 创建项目 1.1 版本说明 1.2 创建模块 1.2.1 核心模块 该模块只加载一次,主要存放一些核心的组件及服务 ng g m core 1.2.1.1 创建一些核心组件 页眉组件:header ...

  6. Angular Material 白天模式和黑夜模式

    Material design调色板 https://www.materialpalette.com/ 明暗:虽然颜色不变,但是针对白天黑夜有做不同处理. 叠加:对话框,弹出菜单,事先是没有加载的.是 ...

  7. ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频

    视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...

  8. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  9. Angular Material 按钮图标系列

    工做中经常用到Angular Material 中的好多按钮素材,奈何官网经常上不去,所以只能自己把这些常用的按钮扒下来了,留给自己同时也留给大家方便查看. Angular material mat- ...

随机推荐

  1. Nginx failing to load CSS and JS files (MIME type error)

    Nginx failing to load CSS and JS files (MIME type error) Nginx加载静态文件失败的解决方法(MIME type错误) 上线新的页面,需要在n ...

  2. Java面向对象和高级特性 项目实战(一)

    一.项目简介 项目名:嗖嗖移动业务大厅 技能点: 二.技能点 三.系统概述 四.整体开发思路 五.实体类和接口开发 六. 创建工具类 七.使用集合存储数据 八.开发计划 九.代码实现 1.项目目录 2 ...

  3. jdk1.8api帮助文档,转载

    链接:https://pan.baidu.com/s/1jkDC68t6ha3PrSbx2BMevQ 密码:o425 转自https://blog.csdn.net/weixin_37012881/a ...

  4. 关于PCA

    PCA是常见的降维技术. 对于使用PCA来进行降维的数据,需要进行预处理,是指能够实现均值为0,以及方差接近.如何来确定到底哪个维度是"主成分"?就要某个axis的方差. 为什么要 ...

  5. Angular2+AngularJS

    AngularJS 系列: 1.angular.module 的定义 var mapApp = angular.module("positionSalaryEditApp",[&q ...

  6. Unity3D外包 团队更新一下UE4和Unity3D案例

    欢迎联系我们索取,谢谢! 有项目外包请联系QQ:372900288 索取案例.

  7. 【转】/etc/rc.d/rc与/etc/rc.d/init.d的关系介绍

    /etc/rc.d/init.d这个目录下的脚本就类似与windows中的注册表,在系统启动的时候执行.程序运行到这里(init进程读取了运行级别),相信从命名的角度大家也能猜到该运行/etc/rc. ...

  8. 基于java webRct webSocket 实现点对点视频 (需要源码的请加支付宝好友)

    打开支付宝首页搜“555176706”领红包,即可加好友 <%@ page language="java" pageEncoding="UTF-8"%&g ...

  9. Vue 给对象添加属性

    坑真多,没想到很多小细节都 改了,我添加个属性都 折腾了半天才看明白原因 Vue.set(row,"isEdit",false);   //给row对象新增一个isEdit的属性.

  10. Ubuntu 12.04 LTS 查看网关地址方法汇总

    来源:http://blog.csdn.net/duyiwuer2009/article/details/26263855 1. ip route show $ ip route show defau ...