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

为什么matInput文本字段显示[object FocusEvent]而不是我在Angular 8中使用(模糊)的实际文本

在Angular 8中,当matInput文本字段显示[object FocusEvent]而不是实际文本时,这通常是因为在模糊搜索中使用了错误的属性或方法。

要解决这个问题,首先需要检查代码中与模糊搜索相关的部分。确保在模糊搜索的输入框中正确地绑定了ngModel,并且ngModel的值在模糊搜索过程中被正确更新。

另外,确保在模糊搜索的方法中,正确地处理了输入框的值。可能需要使用event.target.value来获取输入框的实际文本值,而不是直接使用event或event.target。

以下是一个示例代码,展示了如何正确处理模糊搜索中的输入框值:

HTML模板:

代码语言:txt
复制
<input matInput [(ngModel)]="searchText" (input)="performSearch()">

组件代码:

代码语言:txt
复制
searchText: string;

performSearch() {
  // 使用this.searchText进行模糊搜索逻辑
}

在这个示例中,ngModel绑定了searchText变量,而(input)事件绑定了performSearch方法。在performSearch方法中,可以使用this.searchText来获取输入框的实际文本值,并进行相应的模糊搜索逻辑。

希望这个解答能够帮助到你解决问题。如果你需要更多关于Angular 8或其他云计算相关的问题,请随时提问。

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

相关·内容

JavaSwing_8.1:焦点事件及其监听器 - FocusEvent、FocusListener

如果未指定行为将导致id任何特定参数FocusEvent实例不是从范围FOCUS_FIRST到FOCUS_LAST 1 FocusListener 用于组件上接收键盘焦点事件侦听器接口。...该窗口显示各种组件。注册每个组件上焦点侦听器报告每个焦点获得和焦点丢失事件。对于每个事件,将报告焦点更改中涉及其他组件,即相反组件。...例如,当焦点从按钮转到文本字段时,按钮会触发焦点丢失事件(文本字段为相反组件),然后文本字段会触发焦点获取事件(带有按钮作为相反组件)。失去焦点以及获得焦点事件可能是暂时。...焦点丢失事件由文本字段触发,焦点获得事件由组合框触发。现在,组合框显示它具有焦点,也许文本周围有一条虚线-确切地表示方式取决于外观。...该演示可以使用setFocusable(false)从焦点循环中真正删除该文本区域,但这将产生不幸后果,使使用辅助技术的人员无法使用该组件。 再次按Tab键。焦点从列表移回到文本字段

4.7K10
  • Java常用事件监听器与实例分析

    大家好哇,是灰小猿! 今天来和大家总结一下有关在进行JavaGUI编程时常用事件监听函数基本作用和功能。...Java中常用两种事件监听器是“动作事件监听器”和“焦点事件监听器”。接下来和大家分别分享一下这两种常用事件监听机制。...一般情况下,为事件源做监听事件应使用匿名内部类形式,如上例代码为按钮添加事件时采用匿名内部类形式 焦点事件监听器 焦点事件(FocusEvent)监听器实际使用中同动作事件监听器使用一样广泛...()、removeFocusListener() 下面以一个实例来说明该事件监听器应该,在当第一个文本框失去焦点时,触发事件进行弹窗提示,代码如下: package focusEvent; import...使用焦点事件监听器时,需要注意以下几点: 使用该监听器需要实现FocusListener接口 该接口中重写focusLost()方法是组件失去焦点时调用

    2.6K10

    AngularDart Material Design 选择 顶

    使用factoryRenderer不是树可更改树 disabled bool  是否应将选择显示为已禁用。 默认为false。...useCheckMarks bool 如果为true,则使用复选标记不是复选框来指示是否为多选项目选择了该项目。 此特定样式用于多选菜单项组材料菜单下拉列表。...value dynamic 此选择项表示值。 如果对象实现HasUIDisplayName,则它将呈现使用uiDisplayName字段作为项标签。...使用labelFactory不是它允许更好树可抖动代码。 listAutoFocus bool  弹出窗口打开时是否默认聚焦选项列表。...ariaLabelledBy String  另外描述按钮元素id。 例如,对于带有数字选项下拉列表,显示“每页结果”文本元素。

    6K20

    Java-GUI编程之事件处理

    因为 AWT 编程中 ,所有用户操作,都必须都需要经过一套事件处理机制来完成, Frame 和组件本身并没有事件处理能力 。...案例: ​ 完成下图效果,点击确定按钮,单行文本域内显示 hello world: import java.awt.*; import java.awt.event.ActionListener;...TextEvent 文本事件, 当文本框、文本域里文本发生改变时触发该事件。...事件监听器 不同事件需要使用不同监听器监听,不同监听器需要实现不同监听器接口, 当指定事件发生后 , 事件监听器就会调用所包含事件处理器(实例方法)来处理事件 。...WindowEvent 窗口收到窗口级事件 WindowListener ContainerEvent 容器中增加删除了组件 ContainerListener TextEvent 文本字段文本区发生改变

    1.4K20

    vue封装带提示框单选多选文本框组件

    vue封装带提示框单选/多选文本框组件 Write By CS逍遥剑仙 主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email...最近vue+element前端项目中,需要实现动态渲染带提示框单选/多选文本框,具体效果如下图所示,输入框聚焦时,前端组件通过接收kv参数渲染出选项,用户点击选项选中,可以将选择选项key...[pw9wsrd3kv.jpeg] 由于项目中使用element-ui,首选考虑使用UI框架中input和select组件,然而实际使用中参考文档发现框架提供组件不能很好满足此需求。...$nextTick: vue官方深入响应式原理中说明了 vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是在下次 DOM 更新循环结束之后执行延迟回调,修改数据之后使用 $nextTick...h5input等标签,而对本文封装后文本框是自定义组件,直接使用v-model是无效

    5.3K403

    vue封装带提示框单选多选文本框组件

    最近vue+element前端项目中,需要实现动态渲染带提示框单选/多选文本框,具体效果如下图所示,输入框聚焦时,前端组件通过接收kv参数渲染出选项,用户点击选项选中,可以将选择选项key...由于项目中使用element-ui,首选考虑使用UI框架中input和select组件,然而实际使用中参考文档发现框架提供组件不能很好满足此需求。...$nextTick: vue官方深入响应式原理中说明了 vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是在下次 DOM 更新循环结束之后执行延迟回调,修改数据之后使用 $nextTick...h5input等标签,而对本文封装后文本框是自定义组件,直接使用v-model是无效。...组件应用与改进 带提示框单选/多选文本框组件应用场景除了本项目的需求,还可以应用于企业联系人选择器等,用户输入用户名关键词,提示框显示相关联系人,同时允许用户自由输入用户名。 ?

    7.8K30

    Java图形用户界面设计AWT事件处理

    前言 推荐一个网站给想要了解或者学习人工智能知识读者,这个网站里内容讲解通俗易懂且风趣幽默,对帮助很大。想与大家分享这个宝藏网站,请点击下方链接查看。...因为 AWT 编程中 ,所有用户操作,都必须都需要经过一套事件处理机制来完成, Frame 和组件本身并没有事件处理能力 。...TextEvent 文本事件, 当文本框、文本域里文本发生改变时触发该事件。...WindowEvent 窗口收到窗口级事件 WindowListener ContainerEvent 容器中增加删除了组件 ContainerListener TextEvent 文本字段文本区发生改变...三、示例 代码示例 示例一 完成下图效果,点击确定按钮,单行文本域内显示 hello world: public class EventDemo1 { Frame frame = new

    14610

    Web Hacking 101 中文版 十六、模板注入

    当你传入实际 Python 代码,并且 jinja2 会求值时,它严重性还会增加。 现在,每个 SSTI 严重性取决于所用模板引擎,以及字段上进行何种验证(如果有的话)。...展示你所发现严重性实际上取决于测试什么是可能。并且虽然你可能能够求解一些代码,它可能最后不是重要漏洞。例如,通过使用载荷{{4+4}}来发现了 SSTI,它返回了 8。...与 SSTI 相反是客户端模板注入(CSTI),要注意这里 CSTI 不是一个通用漏洞缩写,像这本书其它缩写一样,推荐将其用于报告中。...重要结论 一定要注意 AngularJS 使用,并使用 Angular 语法{{}}来测试字段。...Uber 资料 这是产生邮件: 载荷注入后blog.organge.tw Uber 邮件 你可以看到,个人资料页面,实际文本被渲染了,但是邮件实际上执行了代码并将其注入到邮件中。

    3.7K10

    一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    如果您对我们为什么这么做感到好奇,可以Angular文档中阅读它。...现在,我们CardList中有我们的卡阵列。我们如何显示不是我们目前标记?...让我们用它来确保实际使用所需属性验证,不是手动检查值长度: import {Component, EventEmitter, OnInit, Output, HostListener, ViewChild...文本中有一个我们字段名称,一个空字符串是初始值,Validators.compose显然允许我们将多个验证器合并到一个字段中。我们使用.value并.setValue('')获得我们领域价值。...两者都是不可变,但第二个是基于第一个,所以State我们创建一个新State对象,不是我们变异值上。

    42.6K10

    Elasticsearch java api 基本搜索部分详解

    blog"}}} 这个搜索含义是:title字段,搜索内容为molong1208 blog;上面是DSL写法,实际上对于简单查询,也可以直接使用url查询,不带json格式,假设我们所使用服务器...,并且显示字段为name以及title,按照id降序排序,输出格式为美化json格式 (2)使用java api 实现简单搜索 1、建立连接 java api使用搜索时候,必须先进行连接,直接...举例说明:name、address为字段名称,13为文本值。查询name字段或者address字段文本值为13结果集。...但是它能够让你指定一个模式(Pattern),不是一个前缀(Prefix)。它使用标准shell通配符:?用来匹配任意字符,*用来匹配零个或者多个字符。...如果你一个analyzed字段使用了它们,它们会检查字段每个词条,不是整个字段

    2K30

    AngularDart4.0 指南- 模板语法一 顶

    学习如何编写显示数据并在数据绑定帮助下使用用户事件模板。 Angular应用程序管理用户看到和可以做事情,通过组件类实例(组件)和面向用户模板交互来实现这一点。...这个规则对Angular“单向数据流”策略是必不可少。您不必担心读取组件值可能会改变一些其他显示值。这个视图整个渲染过程中应该是稳定。... 模板上下文字段优先于组件上下文字段。 在上面的deleteHero(hero)中,hero是模板输入变量,不是组件hero属性。...这个事实值得重复:模板绑定使用属性(properties)和事件(events)发挥作用,不是属性(attributes)。...以下示例将HeroDetailComponentprefix属性初始化为固定字符串,不是模板表达式。 Angular设置它并不再管它。

    5.2K10

    Java交互界面实现计算器开发设计【附函数源码】

    使用Java和C#开发交互界面,最大区别就是: C#交互界面的实现是可以设计模块中直接添加控件并设置其属性,同时还会生成与控件所绑定控件函数Java则不同,Java窗体和控件都需要使用代码来设置...在这里我们使用setOutput表示文本框第一行输出内容,使用setOutput2表示文本框第二行输出内容。...以控件数字7为例,在这里使用num_7.getText()来获取当前所点击控件文本,其实这是比较笨一种方法,需要对每一个控件使用该函数,还有一种方法是获取当前焦点所在控件,并且获取其文本,对这种方法熟悉小伙伴可以留言大灰狼一起交流...小数点控件 当我们点击小数点时候,说明我们输入数据存在小数位,这个时候我们就需要对其作出相应操作,如我们点击运算操作符之前点击小数点控件,则将小数点显示文本第一行,表示第一个数是一个小数...,如果我们是点击运算操作符之后点击小数点控件,则需要将小数点显示文本第二行,表示我们输入第二个数是小数。

    1.4K10

    1 初识ElasticSearch

    为什么使用这个ElasticSearch搜索服务器? ElasticSearch 比Mysql 额外拥有 倒排索引(反向索引) 什么是倒排索引?...把酒… 《离骚》 帝高阳之苗裔兮,朕皇考曰伯庸… 倒排索引:将一段文本,按照一定规则,拆分成不同词条(term),记录数据与词条唯一标识(id)对应关系,形成产物 例如(这里随便举例子)...(生成倒排索引时候,词条会被排序,形成树结构,提升词条查询速度) 搜索原理 关于解决Mysql查询功能低下问题: 我们使用 “月光” 查询时候,ES 会自动进行分词 “月”、”光”、”月光”。...ElasticSearch 核心概念 索引(index):ES存储数据地方,可以理解成 关系型数据库中 数据库概念 映射(mapping):定义了每个字段类型、字段使用分词器。...ES7 默认 type是 _doc 特殊说明: 解决问题光鲜,藏着磕Bug痛苦。 万物皆入轮回,谁也躲不掉! 以上文章,均是实际操作,写出来笔记资料,不会出现全文盗用别人文章!

    22510

    借助 Lucene.Net 构建站内搜索引擎(上)

    前言:最近翻开了之前老杨(杨中科)Lucene.Net站内搜索项目的教学视频,于是作为老杨脑残粉又跟着复习了一遍,学习途中做了一些笔记也就成了接下来您看到这篇博文,仅仅是个人笔记,大神请呵呵一笑而过...相信做过站内搜索.Net程序员应该对Lucene.Net不陌生,没做过也许会问:就不是个查询嘛!为什么不能使用Like模糊查找呢?原因很简单:模糊查询契合度太低,匹配关键字之间不能含有其他内容。...最重要是它会造成数据库全表扫描,效率低下,即使使用视图,也会造成数据库服务器"亚历山大"!因此,有必要了解一下Lucene.Net这个神器(也许现在早已不是)! 一、Lucene.Net简介 ?...Lucene.Net只是一个全文检索开发包,不是一个成型搜索引擎。 它功能就是负责将文本数据按照某种分词算法进行切词,分词后结果存储索引库中,从索引库检索数据速度灰常快。   ...,并将匹配后结果显示repeater列表中; 3.2 创建索引   核心代码: /// /// 创建索引 /// protected

    1.1K20

    动态表单设计与实现(基于Vue ElementUI)

    xxx信息管理这种业务场景中认为最常见操作就是对字段处理(例如查询、编辑等区域表单、图表列名、表格列名),字段恰恰是最为 '规范',它有自己名称、类型 name 它代表名称,类型为字符串...,页面中应该是一个文本框 sex 它代表性别,类型为数值型,当它为0时候代表男、为1时候代表女,页面中应该是一个下拉框 我们可以通过程序语言来描述这种数据结构 用对象或者说map这种结构不用数组是为了可以精准对某个字段进行设置...,useScene是使用场景如果字段不支持这个场景那么字段不予显示(可自行实现禁用场景) <!...动态场景实现 看到这里可能有的朋友会很不解,为什么要构造一个如此复杂useScene,直接定义 canUpdate canQuery 这种布尔值变量来指定场景不就行了吗?...实际上需求是非常复杂多变,场景可以说是无限甚至是相互交织关联、我们可能会根据用户操作动态显示字段显示隐藏,例如提交后显示提交人、提交时间等字段、撤销了就不予显示 let fieldMap =

    3.3K40

    简明AWK实战教程

    认为AWK工具,针对较大格式化文本数据,可能是介于pandas(便捷)与Spark(高效大数据处理能力)之间选择,兼顾便捷与效率! 一般AWK效率优于Python 还不想学~那就现实一点!...AWK常用内置变量 例如:NR,用来表示每一行行号,可以输出文本时候显示行号: NR:显示每一行行号 NF变量则记录了每一行一共有多少列: NF:统计显示每一行有多少列 此时,打印每一行首尾数字是对应行一共有几列...AWK通过管道命令处理终端输出流 在上面的命令中,使用$3=="root" 表达式实现字符匹配。 ==实现字段完全匹配 ~ /匹配字符/ 比较操作,来模糊匹配第9列中存在sh字符串行。...~实现字段模糊匹配 ~ /匹配字符/中,匹配字符还要注意关键字转义。...,继续判断下一个输入行,不是浪费时间继续判断一下是不是当前输入行还小于10。

    1.7K30
    领券