rxjs过滤操作符

一 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);

     } );

   }

}