angular 组件实现模糊查询并且实现保存删除功能

本贴最后更新于 1897 天前,其中的信息可能已经时移俗易

Chips Autocomplete 组件:
(这是一个弹窗的案例)
1.首先是 html 代码:

  <mat-form-field class="example-chip-list">
	 <mat-chip-list #chipList>
		<mat-chip 
		  *ngFor="let user of selectedUsers"
		  [selectable]="selectable"
		  [removable]="removable"
		  (removed)="removePeople(user)"
		  [compareWith]="compareObjects"
		  style="cursor: pointer;">
			{{user.firstName}}
		  <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
		</mat-chip>
		<input matInput
		   placeholder="添加人员"
		   #personInput
		   [formControl]="peopleControl"
		   [matAutocomplete]="auto"
		   [matChipInputFor]="chipList"
		   [disabled]="operation=='show'">
	  </mat-chip-list>
	  <mat-autocomplete #auto="matAutocomplete">
		<mat-option *ngFor="let user of users" [value]="user" (click)="selectedPeople(user)">
		  {{user.firstName}}
		</mat-option>
	  </mat-autocomplete>
  </mat-form-field>

2.ts 文件里面的内容

  // 人员控制器
  peopleControl: FormControl = new FormControl();
  // 模糊查询人员
  users: User[] = [];
  user: User = new User();
  // 选择的人员信息
  selectedUsers: User[] = [];
  // 组件自带的变量声明
  visible = true;
  selectable = true;
  removable = true;
  account: Account;

  @ViewChild('personInput') personInput: ElementRef<any>;

3.(1)ts 文件的 constructor()
以及一些要用的 service 的声明,

  private principal: Principal,

(2)constructer 的{}内容

 // 获取用户信息
  principal.identity().then(account => {
	  this.account = account;
  });
  // 判断条目里的user是否存在,存在执行下面的代码
  if (this.Tasks.users) {
	  this.selectedUsers = this.Tasks.users;
  }
  // 监听这个control下的input输入框(判断输入框内容是否变化,然后根据值请求后台,后台返回符合的数据)
  this.peopleControl.valueChanges.subscribe(
	  name => {
		  // 判断name是否存在,并且是不是字符串类型
		  if (name && typeof name === 'string' && name.trim().length > 0) {
			  // 当name符合条件时,执行搜索人员方法
			  this.searchPeople(name.trim());
		  }
	  }
  );

4.ngOnInit

  // 当用户执行的操作是新增的时候,请求当前用户的信息,在选择框中默认显示选中当前用户
  if (this.operation === 'add') {
	this.usersService.findById(this.account.id).subscribe(
	  (res) => {
		this.user = res.body;
		this.selectedUsers.push(this.user);
		});
  }

5.相关请求方法(ts 文件):

 // 删除选中的用户
 removePeople(person): void {
	 const index = this.selectedUsers.findIndex(p => p.id === person.id);
   if (index !== -1) {
	  person.id = undefined;
	  this.selectedUsers.splice(index, 1);
   }
 }

 //选中的用户
 selectedPeople(person): void {
	 const index = this.selectedUsers.findIndex(p => p.id === person.id);
   if (index === -1) {
		 this.selectedUsers.push(person);
   }
	 this.personInput.nativeElement.value = '';
 }

 // 根据名称模糊搜索人员
 private searchPeople(name: string) {
	 this.users = [];
	  this.isSaving = true;
	  this.usersService.queryByName({
			name: name
	  }).subscribe(res => {
			this.users = res.body;
			this.isSaving = false;
	  }, error1 => {
			console.error(error1);
			this.isSaving = false;
	  });
 }

 // 比较打开页面后,显示这个对象已经被选中的信息
 compareObjects(o1: any, o2: any) {
	 if (o1 && o2) {
		 return o1.name === o2.name && o1.id === o2.id;
	 }
	 return false;
 }

 // 最后再执行保存方法
 save(){}

6.在父组件中要引入相应的 module

  imports: [
	MatChipsModule,
  ],
  providers: [
	  {
		  provide: MAT_CHIPS_DEFAULT_OPTIONS,
		  useValue: {
			  separatorKeyCodes: [ENTER, COMMA]
		  }
	  }
  ]

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 99 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 9 关注
  • Sillot

    Sillot (汐洛)孵化自思源笔记,致力于服务智慧新彖乄,具有彖乄驱动、极致优雅、开发者友好的特点
    Github 地址:https://github.com/Hi-Windom/Sillot

    12 引用 • 26 关注
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 791 回帖 • 1 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    57 引用 • 22 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1090 引用 • 3467 回帖 • 297 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 636 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的,第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    311 引用 • 546 回帖 • 57 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据。 这种动作(网页浏览,搜索和其他用户的行动)是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    35 引用 • 35 回帖
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    9 引用 • 83 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 93 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 906 回帖 • 177 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 633 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 581 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 4 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 596 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 179 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    83 引用 • 894 回帖
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    284 引用 • 4481 回帖 • 652 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • OnlyOffice
    4 引用 • 19 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架,它对 JDBC 进行了非常轻量级的对象封装,使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 676 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 429 关注
  • 安装

    你若安好,便是晴天。

    128 引用 • 1183 回帖