RxJS之过滤操作符 ( Angular环境 )
Posted 沙滩海风
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了RxJS之过滤操作符 ( Angular环境 )相关的知识,希望对你有一定的参考价值。
一 take操作符
只发出源 Observable 最初发出的的N个值 (N = count
)。 如果源发出值的数量小于 count
的话,那么它的所有值都将发出。然后它便完成,无论源 Observable 是否完成。
import { Component, OnInit } from \'@angular/core\'; import { range } from \'rxjs/observable/range\'; import { take } from \'rxjs/operators/take\'; @Component({ selector: \'app-filter\', templateUrl: \'./filter.component.html\', styleUrls: [\'./filter.component.css\'] }) export class FilterComponent implements OnInit { constructor() { } ngOnInit() { range(100, 10) .pipe(take(5)) .subscribe(val => { console.log(val); }); } }
二 distinctUntilChanged操作符
返回 Observable,它只发出源 Observable 发出的与前一项不相同的项。
如果没有提供 compare 函数,默认使用===严格相等检查。
import { Component, OnInit } from \'@angular/core\'; import { of } from \'rxjs/observable/of\'; import { distinctUntilChanged } from \'rxjs/operators/distinctUntilChanged\'; @Component({ selector: \'app-filter\', templateUrl: \'./filter.component.html\', styleUrls: [\'./filter.component.css\'] }) export class FilterComponent implements OnInit { constructor() { } ngOnInit() { of(1, 1, 2, 2, 3, 3, 1, 1, 2, 2, 3, 3) .pipe(distinctUntilChanged()) .subscribe( val => { console.log(val); } ); } }
如果提供了 compare 函数,那么每一项都会调用它来检验是否应该发出这个值。
import { Component, OnInit } from \'@angular/core\'; import { of } from \'rxjs/observable/of\'; import { distinctUntilChanged } from \'rxjs/operators/distinctUntilChanged\'; export class Person { constructor(public name: string, public age: number) { } } @Component({ selector: \'app-filter\', templateUrl: \'./filter.component.html\', styleUrls: [\'./filter.component.css\'] }) export class FilterComponent implements OnInit { constructor() { } ngOnInit() { of<Person>( new Person(\'Leo\', 11), new Person(\'Raph\', 12), new Person(\'Mikey\', 13), new Person(\'Mikey\', 14) ) .pipe( // of方法使用了泛型,可以省略指定p、q为Person类型 distinctUntilChanged((p, q) => p.name === q.name) ) .subscribe( val => { console.log(val); } ); } }
以上是关于RxJS之过滤操作符 ( Angular环境 )的主要内容,如果未能解决你的问题,请参考以下文章
Angular使用总结 --- 搜索场景中使用rxjs的操作符