首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

angular material autocomplete -如何显示选定对象的指定属性

Angular Material Autocomplete 是 Angular Material 库中的一个组件,用于实现自动完成功能。它可以帮助用户在输入框中输入内容时,根据输入的关键字动态展示匹配的选项供用户选择。

要显示选定对象的指定属性,可以通过以下步骤实现:

  1. 创建一个数据源:首先,你需要创建一个数据源,该数据源包含了所有可供选择的选项。数据源可以是一个数组,也可以是一个 Observable 对象。每个选项对象应该包含一个属性,用于显示在自动完成下拉列表中。
  2. 绑定数据源:在 HTML 模板中,使用 matAutocomplete 指令将数据源绑定到自动完成输入框上。例如:
代码语言:txt
复制
<input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="selectedOption">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of options" [value]="option">
    {{ option.property }}
  </mat-option>
</mat-autocomplete>

在上面的示例中,options 是你的数据源数组,selectedOption 是用于存储用户选择的选项的变量。option.property 是你要显示的选项对象的指定属性。

  1. 过滤选项:如果你希望根据用户输入的关键字过滤选项,可以使用 matAutocompletedisplayWith 属性和一个过滤函数。过滤函数接收用户输入的值,并返回一个过滤后的选项数组。例如:
代码语言:txt
复制
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of filteredOptions" [value]="option">
    {{ option.property }}
  </mat-option>
</mat-autocomplete>
代码语言:txt
复制
displayFn(option: any): string {
  return option ? option.property : '';
}

filterOptions(value: string): any[] {
  const filterValue = value.toLowerCase();
  return this.options.filter(option => option.property.toLowerCase().includes(filterValue));
}

在上面的示例中,displayFn 函数用于指定选项对象的指定属性要如何显示。filterOptions 函数用于根据用户输入的值过滤选项数组。

以上就是如何显示选定对象的指定属性的方法。关于 Angular Material Autocomplete 的更多详细信息,你可以参考腾讯云的相关产品 Angular Material Autocomplete

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录笔记第三篇,介绍 angular 中表单控件相关概念,了解如何angular 中创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式创建表单控件实例 在组件类中进行显示创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定数据模型来完成数据更新,...name 属性则是 angular 用来注册控件 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件状态 在表单中使用 ngModel...,在使用时,通过将控件实例赋值给属性,后续则可以通过监听这个自定义属性来跟踪表单控件值和状态 import { Component, OnInit } from '@angular/core';...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件 getter 方法,从而在模板中通过此方法来获取到指定控件状态信息 import { Component, OnInit

18.9K20

【Flutter 组件集录】Autocomplete 自动填充

自定义 Autocomplete 组件内容 其实上面那样默认样式很丑,而且没有提供 直接 属性设置样式。所以了解如何自定义是非常关键,否则只是一个玩具罢了。...另外,由于是浮层,展示文字时,上面需要嵌套 Material 组件。 至于高亮某个关键字,下面是我封装一个小方法,拿来即用。...这样,在 TextFormField 构建时,你可以指定自己需要装饰。 到此,我们就实现了上面,输入过程中,浮层面板内容关键字高亮显示效果。...这样在 _buildOptionsView 中,回调就是 User 可迭代对象。如下。封装一个 _UserItem 组件,对条目进行显示。...我们先看一下 Autocomplete 对 optionsViewBuilder 提供默认显示,其返回是 _AutocompleteOptions 组件。

1.5K20
  • AngularDart Material Design 输入 顶

    属性仅在type =“email”时适用,否则将被忽略。 role - input元素role属性。...请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数器面板...请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数器面板...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择中第一个选定值在选项中有效       2.如果选择没有选定值,则选项中没有任何活动 inputText String...selection SelectionModel  如果设置,自动建议将使用提供可观察SelectionModel对象。 默认情况下使用单个选择模型。

    5.3K40

    Angular 16 正式版发布

    如上动图显示了 VSCode 中 Angular 语言服务自动导入功能。 四、改善开发者体验 除了我们重点关注大型计划外,我们还致力于引入备受要求功能。...现在,可以将以下数据传递给路由组件输入: 路由 data — resolvers 和 data 属性 Path 参数 Query 参数 以下是如何访问路由 resolver 数据示例: const...在 Angular v16 中,我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 新功能,该功能允许你为 Angular 内联组件样式指定 nonce 属性。...有两种方法可以指定 nonce:使用 ngCspNonce 属性或通过 CSP_NONCE 注入令牌。...在过去几个季度里,我们与谷歌 Material Design 团队密切合作,为 Angular Material Web 提供了 Material 3 实现。

    2.5K10

    听我说说我博客: 月访问量过万个人IT博客技术史

    博客是如何工作? HTTP服务器 当你开发在网页上访问我博客时候,你可能会注意到上面的协议是HTTPS。 但是并不会察觉到它是HTTP2.0。...Angluar & Material Design Lite vs Bootstrap & jQuery Mobile 这是一个现代浏览器前端战争。...最后,出现了Material Design Lite,也就是现在这个丑丑页面,还不兼容新IE(微信浏览器)。 作为一个技术博客,它也用到了HighLight.js语法加亮。...API 在构建SPA时候,做了一些API,然后就有了一个Auto Sugget功能: 或者说,它是一个Auto Complete,可以直接借助于jQuery AutoComplete插件。...Render) Angular Messages + Angular-elastic 微信端: Wechat-Python-SDK

    1.6K100

    Angular v16 来了!

    Angular 语言服务自动导入 Gif 显示了 VSCode 中 Angular 语言服务自动导入功能 还有更多!...现在您可以将以下数据传递给路由组件输入: 路由数据——解析器和数据属性 路径参数 查询参数 以下是如何从路由解析器访问数据示例: const routes = [ { path : 'about'...nonce在 Angular v16 中,我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 新功能,它允许您为 Angular 内联组件样式指定一个属性。...有两种方法可以指定随机数:使用属性ngCspNonce或通过CSP_NONCE注入令牌。 如果您有权访问可以将两者添加到标头和构建响应时ngCspNonce服务器端模板,则该属性很有用。...在过去几个季度中,我们与 Google Material Design 团队密切合作,为 Web 和 Angular Material 提供参考 Material 3 实现。

    2.6K20

    AngularDart 4.0 高级-结构指令 顶

    Angular拥有强大模板引擎,可以让我们轻松操纵元素DOM结构。 本指南介绍Angular如何用结构指令操纵DOM,以及如何编写自己结构指令来完成相同操作。 尝试一下实例(查看源代码)。...该指南在谈论其属性以及指令功能时引用了指令类。 指南在描述如何将指令应用于HTML模板中元素时引用了属性(attribute)名称。...这些是两个NgFor输入属性名称。 这就是指令如何得知列表是heroes,并且track-by功能是trackById。 当NgFor指令遍历列表时,它会设置并重置其自己上下文对象属性。...Angular将它们设置为上下文index和odd 属性的当前值。 没有指定let-hero上下文属性。 它原意是隐含。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性

    16.1K20

    AngularDart Material Design 应用布局 顶

    要在Angular组件中使用这些样式,只需将其添加为Component注解中styleUrls值即可。 建议在任何特定于组件样式之前添加样式,以便您可以根据需要轻松覆盖样式值。...material-spacer 占用标题和任何导航链接之间空间。 需要在标题之后和任何导航元素之前放置。 material-navigation 导航元素将显示在头部左侧。...临时抽屉具有可选overlay属性,可用于在抽屉打开时在非抽屉内容上方显示透明覆盖。...-- Content goes here --> 在另一侧显示抽屉 所有抽屉都有一个HTML属性end,它将抽屉定位在页面的另一侧,正常(LTR右侧,RTL左侧...这是使用标准material-list组件和一些特殊CSS类来完成。 顶级抽屉内容应该是具有可选组元素MaterialListComponent,这些元素由元素上group属性指定

    4K30

    Angular 6正式版发布,都有哪些新功能

    学习更多关于如何使用ng update , 开始学习如何创建您自己 ng update 语法,可以参考 rxjs package.json 入口,它关联了 collection.json。...ng add @angular/material:安装并设置 Angular Material 和主题,注册新初始组件 到ng generate中。...Angular Material + CDK 组件 最值得一提是用于显示分层数据树形控件,遵循数据表组件模式,CDK 包含树核心指令,而 Angular Material 则提供与顶层 Material...Angular还更新了徽章(badge)和底部菜单栏组件,徽章用于显示小而有用信息,例如未读信息数量。...如何更新到 Angular 6.0.0 读者可以访问 update.angular.io 来得到升级应用信息和指导。

    4.2K20

    AngularDart4.0 英雄之旅-教程-07路由 顶

    '; 使路由器可用 要告诉Angular应用使用路由,请在应用引导程序功能中指定ROUTER_PROVIDERS:web/main.dart import 'package:angular/angular.dart...导航到英雄细节 虽然所选英雄详细信息显示在HeroesComponent底部,但用户应该能够通过以下其他方式导航到HeroDetailComponent: 从仪表板到选定英雄。...目前,父HeroesComponent使用如下绑定将组件hero属性设置为hero对象: 但是这种绑定在任何路由脚本中都不起作用...英雄名字将显示相同方式。 主要变化是如何得到英雄名字。...你走过路 以下是您在此页面中所取得成果: 您添加了Angular路由器来浏览不同组件。 您了解了如何创建路由器链接来表示导航菜单项。 您使用路由器链接参数导航到用户选择英雄细节。

    17.6K30

    Ng-Matero v15 正式发布

    另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮选择可以参考 Angular Material 在 Button 文档中说明: Angular Material 使用原生 ...基于 MDC Angular Material 组件 我觉得 v15 最大变化不是 Angular,而是 Angular Material。...直接使用 ng update 升级的话,所有引用组件都会自动改为 legacy 组件,所以并不会出现 break changes,但是 legacy 组件都被标记为 deprecated(会显示中划线...update 完成之后可以再使用迁移工具将指定组件升级到 MDC,还是挺方便。...比较坑是外层容器使用了 overflow: hidden 属性,影响到了 Material Extensions 中 select 组件,暂时通过设置默认参数 appendTo="body" 临时修复

    5.5K40

    angular4实战(1) angular-cli

    https://cli.angular.io/ 提供了搭建一个angular项目的简单介绍。 本文就angular-cli这块指令属性,在做一些扩展介绍。...在下载好angular-cli之后,通过在命令行输入ng help可以获得angular-cli指令详细介绍。 ? 如果新建一个项目仅仅用上述5条,显然是不满足开发需求,在介绍5条属性。...—prefix 默认是app,可以选择改成其他,如果不设置,那么项目生成组件选择对象就是app开头,即: ?...—routing angular生成项目默认是不带路由,而路由在但也应用基本上是必备模块,因此在生成项目时需添加此属性。...本章对angular-cli介绍到此为止,下章具体介绍路由。 项目地址:https://github.com/jiwenjiang/angular4-material2

    66820

    AngularDart 4.0 高级-生命周期钩子 顶

    OnChanges 看看每次组件输入属性发生变化时,Angular如何用变更对象调用ngOnChanges钩子。 显示如何解释更改对象。...peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...ngOnInit是组件获取其初始数据好地方。 教程和HTTP章节显示如何。 还要记住,指令数据绑定输入属性在构建之后才会设置。 如果您需要根据这些属性初始化指令,那么这是一个问题。...,该对象将每个已更改属性名称映射到保存当前和前一个属性SimpleChange对象。...hero属性值是对hero对象引用。 Angular并不在意英雄自己name属性发生了变化。 英雄对象引用没有改变,所以从Angular角度来看,没有改变反馈!

    6.2K10

    Angular 工具篇之文档管理

    在安装 Compodoc 之前,我们先来简单了解一下它特点: 生成文档结构清晰。 支持多种主题风格,比如 laravel, original, material, postmark 等。...: -p, –tsconfig [config] —— 指定 tsconfig.json 文件路径 -n, –name [name] —— 文档标题 -s, –serve —— 启动本地文档服务器(...默认地址为 http://localhost:8080/) -r, –port [port] —— 指定本地文档服务器端口 -w, –watch —— 启动监听模式,文件发生异动时自动编译 –theme...-d, –output [folder] —— 指定文档输出目录 -h, –help —— 显示帮助信息 若需查看完整配置项,可以浏览 compodoc - usage。...总结 本文简单介绍了如何利用 Compodoc 这款工具,为 Angular 应用程序生成静态文档,Compodoc 基本上能够满足我们需求。

    1.6K10

    使用Angular8和百度地图api开发《旅游清单》

    我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API时跨域问题 对localStorage进行基础封装,进行数据持久化 material...3.angular基本语法和架构 1.基本语法 和vue类似,ng基本语法如下: 模版语法 数据指令 属性绑定 事件绑定 案例如下: {{title}} <h2 [title]="mytitle...]绑定<em>属性</em>,*ngFor为循环指令,类似的*ngIf为条件判断,事件绑定用(click),我们看看组件<em>的</em>ts文件对应<em>的</em>写法: import { Component } from '@<em>angular</em>/core...server,把hasDone为true<em>的</em>数据过滤出来,<em>显示</em>在地图上。...如果想了解完整代码,欢迎在我<em>的</em>github上查看。 接下来看看我<em>的</em>大陆页面,其实涉及<em>的</em>难点不是很多,主要是根据hasDone为true或false去<em>显示</em>不同<em>的</em>样式。

    6K30

    【企业数字化转型】数据可视化技术:Three.js 用Physijs在场景中添加物理效果

    例如,它属性跟THREE.CubeGeometry属性很相配 Physijs.SphereMesh/对于球形可以使用这个网格。...它跟THREE.SphereGeometry属性很相配 Physijs.CylinderMesh/通过设置THREE.Cylinder属性你可以创建出各种柱状图形。...如果你想在这样一个对象上应用物理效果,那么可以使用、最相匹配网格类就是ConeMesh Physijs.CapsuleMesh(胶囊网格)/跟THREE.Cylinder属性很相似,但其底部和底部是圆...通过该网格你可以从一个THREE.PlaneGeometry对象创建出一个高度场。 使用约束限制对象移动: 我们已经了解到各种图形如何对重力、摩擦和弹性做出反应。并影响碰撞。...如果对象始终是静态,例如地面,则可以0使用第三个参数创建网格时将其设置为质量:new Physijs.BoxMesh( geometry, material, 0)。

    4.5K31

    浅谈 Checkbox Group 双向数据绑定

    简单看一下 Ant Design 是如何设计这个组件。...另外,React 版和 Angular输出值类型也是固定,其中 React 版输出是一个关于 value 字符串数组,Angular 版是则是一个双向绑定 checked 原数组(个人觉得...那到底应该怎样设计 checkbox-group 双向数据绑定才能更灵活使用呢? 如何设计 Checkbox Group 在介绍如何设计之前,我们先尝试能否从其它组件设计中找到灵感。...Select 双向数据绑定 下面我们看一下 Material Select 和 Ng-Select 是如何设计双向绑定,数据就以上面的 cars 为例。...Material Select 完全基于模板渲染,Ng-Select 则是属性配置优先,两者数据回显都是通过 compareWith。

    2.1K10
    领券