Angular4怎么实现立即查询

大佬教程收集整理的这篇文章主要介绍了Angular4怎么实现立即查询，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

最近小编在做的项目中要求输入查询内容不需要点击查询内容就可以实现查询功能，下面小编就来介绍一下Angular4怎么实现查询功能。

一、点击查询按钮出现查询内容

如果是这种情况的话，那么输入框和查询按钮就是分离的，点击查询按钮的时候输入框需要获取输入框中的内容，将输入框中的内容作为查询条件。这里用到的就是查询按钮，也就是按钮的click事件。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" placeholder="书名/作者名" id="find" />
</div>
<div class="right_icon">
<i class="fa fa-search " aria-hidden="true" (click)="findResult()"></i>
</div>

最终效果：（查询结果显示在了新的页面）

二、输入查询内容回车出现查询结果

如果采用这种情况的话，我们只需要有输入框就可以了，不需要再添加删除按钮了，我们只需要在输入框输入查询条件，直接点击回车就可以查询，这样实现起来也方便，用户友好性也提升了。这里用的的输入框change事件，输入框内容改变，点击回车就会触发该事件。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" (change)="query()" placeholder="书名" />
</div>

最终效果：

三、输入查询内容立即出现查询结果

这种情况非常适合于手机端，也极大的提升了用户友好性，用户输入查询条件就可以立即得到结果，随着用户输入条件的不断精确，获得的结果也不断地精确。 用到的输入框的keyup事件，键盘弹起就会触发查询。
代码示例：

<div class="header_input">
<input type="text" class="form-control " [(ngModel)]="condition" (keyup)="query()" placeholder="书名" />
</div>

最终效果：

总结

同样的功能实现的方法有很多，我们要选择的就是最适合用户的，用户体验最佳的方式来实现，所以我们的目的不是实现功能，是给用户最好用的产品。

大佬总结

以上是大佬教程为你收集整理的Angular4怎么实现立即查询全部内容，希望文章能够帮你解决Angular4怎么实现立即查询所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。