首页
学习
活动
专区
工具
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或其他云计算相关的问题,请随时提问。

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

相关·内容

AngularDart Material Design 输入 顶

它有可选的标签。注意:客户端必须在其指令列表中声明materialInputDirectives而不是MaterialInputComponent。...当值为非null时,始终显示字符计数。 required bool  是否需要输入。 如果没有输入文本,则必需的输入将在第一次模糊时显示验证错误。...(在输入或失去焦点时。) focus StreamFocusEvent>  元素聚焦时的事件。...Accessor始终设置从输入设置的原始String值,但仅在可以解析输入时设置Control的值。 keypressUpdate属性在每个按键上都有值更新,而默认值是仅在模糊事件上更新的值。...Inputs: percentErrorRenderer Function  允许客户端使用自己的错误消息而不是默认消息的函数。 查看源码。

5.3K40

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

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

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

    大家好哇,我是灰小猿! 今天来和大家总结一下有关在进行Java的GUI编程时常用的事件监听函数的基本作用和功能。...在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...h5的input等标签,而对本文封装后的文本框是自定义组件,直接使用v-model是无效的。

    5.4K403

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

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

    7.8K30

    java之十二 事 件 处 理

    一些产生事件的活动可以是通过按一个按钮,用键盘输入一个字符,选择列表框中的一项,点击一下鼠标。许多别的用户操作也能作为例子列出。 事件可能不是由于用户接口的交互而直接发生的。...而最后一个事件只在产生一个字符时发生。请记住,不是所有被按下的键都产生字符。例如,按下SHIFT键就不能产生一个字符。 还有许多别的整型常量在KeyEvent类中被定义。...接下来的小应用程序说明了这个过程。它在小应用程序所在窗口的状态栏中显示了鼠标的当前坐标。每当鼠标按钮被按下,在鼠标指针所在的位置将显示“Down”。而当鼠标按钮释放时,将显示“Up”。...如果鼠标按钮被点击,“Mouse clicked”将被显示在小应用程序显示区域的左上角。 当鼠标进入或退出小应用程序窗口时,在小应用程序显示区域的左上角将显示一个消息。...接下来,这些坐标将在paint()方法中被使用,以便在这些事件发生的点显示输出。

    8300

    AngularDart Material Design 下拉列表 顶

    使用声明性API时,不会注入SelectionModel和SelectionOptions,因此将项目标记为选中不是自动的。...buttonAriaLabelledBy String  在下拉按钮中描述选择的元素的id。 例如,对于带有数字选项的下拉列表,显示“每页结果”的文本元素。...deselectLabel String 选择项目的文本标签,取消选择当前选择项。 deselectOnActivate bool  是否在单击或enter/space键上取消选择所选选项。...使用labelFactory而不是它允许更好的树可抖动代码。 listAutoFocus bool  弹出窗口打开时是否默认聚焦选项列表。...focus StreamFocusEvent>  下拉按钮聚焦时触发的事件。 visibleChange Stream  当下拉列表的可见性发生变化时触发。

    5.1K20

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

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

    17110

    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.7K10

    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)。...以下示例将HeroDetailComponent的prefix属性初始化为固定字符串,而不是模板表达式。 Angular设置它并不再管它。

    5.2K10

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

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

    1.4K10

    12.6事件处理

    (“Event object”)。...,其中只涉及了ActionEvent事件类,实际上,在java.awt.event和javax.swing.event包中还定义了很多其他事件类,例如ItemEvent、MouseEvent和KeyEvent...一般情况下,ActionEvent使用情况是单击按钮、选择一个项目、文本框按下回车等;ItemEvent使用情况是具有多个选项的组件上,如JCheckBox、JComboBox等;WindowEvent...Swing提供了滚动窗格类JScrollPane,专门用来处理具有滚动功能的组件,只需要创建一个JScrollPane对象,并为其指定一个要显示的组件即可使用滚动窗格。...(2) 在JFrame窗体下部添加5个按钮,分别为显示上一张、下一张和1、2、3,控制窗体上部显示的红、蓝、绿颜色卡片,使用CardLayout布局管理器实现如上效果。

    13110

    1 初识ElasticSearch

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

    22710

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

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

    1.1K20
    领券