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

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

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] } } ]

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖 • 1 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 3 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 73 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖 • 2 关注
  • SendCloud

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

    2 引用 • 8 回帖 • 487 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 630 关注
  • 单点登录

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

    9 引用 • 25 回帖 • 1 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 408 回帖 • 486 关注
  • Logseq

    Logseq 是一个隐私优先、开源的知识库工具。

    Logseq is a joyful, open-source outliner that works on top of local plain-text Markdown and Org-mode files. Use it to write, organize and share your thoughts, keep your to-do list, and build your own digital garden.

    7 引用 • 69 回帖 • 4 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 389 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    27 引用 • 196 回帖 • 26 关注
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 660 关注
  • sts
    2 引用 • 2 回帖 • 221 关注
  • 黑曜石

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

    A second brain, for you, forever.

    21 引用 • 204 回帖 • 1 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    108 引用 • 295 回帖
  • gRpc
    11 引用 • 9 回帖 • 88 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 568 关注
  • 机器学习

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

    83 引用 • 37 回帖
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 3 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 760 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 4 关注
  • TGIF

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

    289 引用 • 4492 回帖 • 658 关注
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • 音乐

    你听到信仰的声音了么?

    61 引用 • 512 回帖
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖