Angular搜索场景中使用rxjs的操作符处理思路

在有input输入框的搜索/过滤业务中，总会考虑如何减少发起请求频率，尽量使每次的请求都是有效的。节流和防抖是比较常见的做法，这类函数的实现方式也不难，不过终归还是需要自己封装。rxjs提供了各种操作符 ， 可以很快捷高效的实现这些功能。

栗子

　　现在有一个查询场景，可以通过城市、类型、关键字来多维度过滤结果，如下图：

　　处理思路：

　　　　1、通过ngModel将select和input的值绑定到模型中的过滤条件对象

　　　　2、监听select输入框的change事件和input输入框的input事件来触发 发送过滤条件的函数

　　　　3、创建一个用于发送过滤条件的Subject，再通过操作符来进行防抖动、前后值的对比等处理，订阅此主体，有有效的过滤条件过来时才发送请求，拉取数据。

　　值绑定和事件监听：

<select name="city" id="city" [(ngModel)] = "config.cityCode" (change)="filterList()">
   <option [value]="city.value" *ngFor="let city of citylist" >{{city.name}}</option>
  </select>
  <select name="type" id="type" [(ngModel)] = "config.areaType" (change)="filterList()">
   <option value="">全部</option>
   <option value="TRAFFIC">交通</option>
   <option value="TRAVEL">旅游</option>
  </select>
  <input type="text" class="search" id="search"
    [(ngModel)] = "config.name"
    (input)="filterList()"
    placeholder="请输入关键字">

这里为什么input不监听change事件呢？ type=text类型的input在失焦的时候才会触发change事件，而input事件则只要value变化就会触发（这里没有考虑IE兼容性问题）

　　处理函数 ：

 // 用于传递配置项
 public $filter = new Subject<any>();
 // 过滤条件
 public config: FilterConfig = {
 cityCode : '',
 areaType : '',
 name : ''
 };
 ngOnInit() {
 // 监听过滤配置项
 this.$filter.pipe(
  debounceTime(500),
  distinctUntilChanged( (n: FilterConfig , o: FilterConfig): boolean => {
  return n.name === o.name &&
    n.cityCode === o.cityCode &&
    n.areaType === o.areaType;
  })
 ).subscribe( _config => {
  this.getRegionList(_config);
 });
 }
 filterList() {
 // 每次都要发送一个新的对象，否则distinctUntilChanged compare的时候会一直比较同一个对象的值
 this.$filter.next(Object.assign({}, this.config));
 }
 getRegionList (_config) {
 // 发送请求，更新区域数据
 console.log(_config);
 }

　　需要注意的是，$filter传递过滤条件的时候，一定要发送一个新的对象，否则 distinctUntilChanged 的 compare 函数由于比较的是同一个对象，会一直认为没有变化，导致不会继续传播。因为config对象的value都是string简单类型，所以可以直接用Object.assign，如果value值是对象类型的话，就需要自己撸个简单的深拷贝工具函数了

总结

　　主要的思路就是通过Subject来发送过滤条件，这样就可以使用rxjs的各种操作符，可以快捷很多。而在比较对象的时候需要自定义distinctUntilChanged 操作符的compare函数，这时需要注意不要传递同一个对象。

总结

以上所述是小编给大家介绍的Angular搜索场景中使用rxjs的操作符处理思路，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 如何用RxJS实现Redux Form

    如何用RxJS实现Redux Form

    写在前面的话 看这篇文章之前,你需要掌握的知识: React RxJS (至少需要知道 Subject 是什么) 背景 form 可以说是 web 开发中的最大的难题之一.跟普通的组件相比,form 具有以下几个特点: 1.更多的用户交互. 这意味着可能需要大量的自定义组件,比如 DataPicker,Upload,AutoComplete 等等. 3.频繁的状态改变. 每当用户输入一个值,都可能会对应用状态造成改变,从而需要更新表单元素或者显示错误信息. 3.表单校验,也就是对用户输入数据的有

  • RxJS的入门指引和初步应用

    前言 RxJS是一个强大的Reactive编程库,提供了强大的数据流组合与控制能力,但是其学习门槛一直很高,本次分享期望从一些特别的角度解读它在业务中的使用,而不是从API角度去讲解. RxJS简介 通常,对RxJS的解释会是这么一些东西,我们来分别看看它们的含义是什么. Reactive Lodash for events Observable Stream-based 什么是Reactive呢,一个比较直观的对比是这样的: 比如说,abc三个变量之间存在加法关系: a = b + c 在传统

  • 关于RxJS Subject的学习笔记

    Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念.期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下: 期刊出版方 - 负责期刊的出版和发行工作 订阅者 - 只需执行订阅操作,新版的期刊发布后,就会主动收

  • angular.js4使用 RxJS 处理多个 Http 请求

    有时候进入某个页面时,我们需要从多个 API 地址获取数据然后进行显示.管理多个异步数据请求会比较困难,但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能.处理多个请求有多种方式,使用串行或并行的方式. 基础知识 mergeMap mergeMap 操作符用于从内部的 Observable 对象中获取值,然后返回给父级流对象. 合并 Observable 对象 const source = Rx.Observable.of('Hello'); //map t

  • 使用RxJS更优雅地进行定时请求详析

    使用RxJS更优雅地进行定时请求详析

    在用 Angular 做项目的时候,遇到了一个有点麻烦的问题.具体问题如下: 轮循请求某个接口,如何保证接口返回的数据与请求的顺序相同? 实际的业务场景是这样的:前端需要轮循请求后端接口获取文件处理进度,并在前端用进度条展示.如下方所示: 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求.然而结果有点诡异,进度条的变化不是递增,而是有快有慢,比如 30%,20%,50%,40%这样.仔细一想也知道问题出在哪,异步请求的结果并不是按顺序返回的. 我在之前的工作

  • jQuery图片切换插件jquery.cycle.js使用示例

    jQuery图片切换插件jquery.cycle.js使用示例

    Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. 复制代码 代码如下: <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascri

  • Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

    前言 RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单.可是最近在升级中遇到了一些问题,下面就来给大家介绍下,给同样遇到这个问题发朋友们一些参考,下面话不多说了,来一起看看详细的介绍吧. Angular 5.0.5升级RxJS到5.5.3报错: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence Em

  • 学习RxJS之JavaScript框架Cycle.js

    是什么 Cycle.js 是一个极简的JavaScript框架(核心部分加上注释125行),提供了一种函数式,响应式的人机交互接口(以下简称HCI): 函数式 Cycle.js 把应用程序抽象成一个纯函数 main(),从外部世界读取副作用(sources),然后产生输出(sinks) 传递到外部世界,在那形成副作用.这些外部世界的副作用,做为Cycle.js的插件存在(drivers),它们负责:处理DOM.提供HTTP访问等. 响应式 Cycle.js 使用 rx.js 来实现关注分离,这意

  • Angular搜索场景中使用rxjs的操作符处理思路

    在有input输入框的搜索/过滤业务中,总会考虑如何减少发起请求频率,尽量使每次的请求都是有效的.节流和防抖是比较常见的做法,这类函数的实现方式也不难,不过终归还是需要自己封装.rxjs提供了各种操作符 , 可以很快捷高效的实现这些功能. 栗子 现在有一个查询场景,可以通过城市.类型.关键字来多维度过滤结果,如下图: 处理思路: 1.通过ngModel将select和input的值绑定到模型中的过滤条件对象 2.监听select输入框的change事件和input输入框的input事件来触发 发

  • angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例

    本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例,分享给大家,具体如下: 添加一个pipe: import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe im

  • Java多条件判断场景中规则执行器的设计

    Java多条件判断场景中规则执行器的设计

    业务场景 近日在公司领到一个小需求,需要对之前已有的试用用户申请规则进行拓展.我们的场景大概如下所示: if (是否海外用户) { return false; } if (刷单用户) { return false; } if (未付费用户 && 不再服务时段) { return false } if (转介绍用户 || 付费用户 || 内推用户) { return true; } 按照上述的条件我们可以得出的结论是: 咱们的的主要流程主要是基于 and 或者 or 的关系. 如果有一个不匹

  • 浅谈typescript中keyof与typeof操作符用法

    目录 一.keyof 简介 二.keyof 的作用 三.keyof 与对象的数值属性 四.keyof 与 typeof 操作符 一.keyof 简介 TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称.keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型.下面我们来看个例子: interface Person {   name: string;   age: number;   lo

  • Rxjs TakeUntil 操作符内容梳理总结

    Rxjs TakeUntil 操作符内容梳理总结

    TakeUntil 的官方文档对这个操作符的解释是: Emit values until provided observable emits. 即它可以被赋予另一个起锚定作用的 Observable,当该锚定 Observable emit 值时,原始的 Observable 就停止发射值,进入 complete 操作. 看一个实际的例子: import { interval, timer } from 'rxjs'; import { takeUntil } from 'rxjs/operat

  • Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)

    废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • angular ng-repeat数组中的数组实例

    //先定义一个数组 anular代码: var app = angular.module('serApp', []); app.controller('indexCtrl', function($scope, $http) { $scope.arrs = [{ <BR> n:'a': arr:['1','2','1'] },{<BR><BR> n:'b': arr:['4','5','6'] }]; }) html 代码: <BR> <div ng-c

  • 基于Python正则表达式提取搜索结果中的站点地址

    基于Python正则表达式提取搜索结果中的站点地址

    正则表达式对于Python来说并不是独有的,最近在把google搜索的结果中所有的站点地址导出,于是想到用python正则表达式提取搜索结果中的站点地址. 这其中涉及几个需要解决的问题: 1.获取搜索的结果文本 为了获得更多的地址,我使用了Google的高级搜索功能,每个页面显示100条结果. 获得显示的结果后,可以查看源码,并保持成文本文件就有了搜索的结果文本 2.分析如何提取站点信息 首先需要分析获取的页面,查看以怎样的方式可以提取出站点信息. 我使用IE8自带的开发工具(按F12就会弹出来

  • Angular在一个页面中使用两个ng-app的方法

    下面一段代码给大家介绍了Angular在一个页面中使用两个ng-app的方法,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title> </head> <b

随机推荐