如何使用 rxjs 过滤器确保最小输入长度

Question

I am trying to use the filter property on a Angular formcontrol.

This is the code:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { SpotifyService } from '../services/spotify.service';
import { Artist } from '../models/models';
import { Observable, Subscription } from 'rxjs/Rx';

    @Component({
      selector: 'spt-search',
      templateUrl: './search.component.html',
      styles: []
    })
    export class SearchComponent implements OnInit {
      public searchResult: Observable<Array<Artist>>;
      public searchString: string;
      public term = new FormControl;
      constructor(private spotService: SpotifyService) { }

      ngOnInit() {
        this.searchResult = this.term.valueChanges
          .debounceTime(400)
          .distinctUntilChanged()
          .filter((query: string) => query.length > 1)
          .switchMap(term => this.spotService.searchMusic(this.term.value).map(res => res.artists.items));
      }
    }

When I try to set a filter I get this error:

EXCEPTION: Uncaught (in promise): Error: Error in :0:0 caused by: this.term.valueChanges.debounceTime(...).distinctUntilChanged(...).filter is not a function
TypeError: this.term.valueChanges.debounceTime(...).distinctUntilChanged(...).filter is not a function
    at SearchComponent.ngOnInit (http://localhost:4200/main.bundle.js:229:14)
    at Wrapper_SearchComponent.ngDoCheck (/AppModule/SearchComponent/wrapper.ngfactory.js:22:53)
    at CompiledTemplate.proxyViewClass.View_SearchComponent_Host0.detectChangesInternal (/AppModule/SearchComponent/host.ngfactory.js:28:29)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges 

Answer 1

Hi i think your problem is that the function .distinctUntilChanged() doesn't return a collection on which you can attach the .filter() method ..but you can give a try to this:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { SpotifyService } from '../services/spotify.service';
import { Artist } from '../models/models';
import { Observable, Subscription } from 'rxjs/Rx';

    @Component({
      selector: 'spt-search',
      templateUrl: './search.component.html',
      styles: []
    })
    export class SearchComponent implements OnInit {
      public searchResult: Observable<Array<Artist>>;
      public searchString: string;
      public term = new FormControl;
      constructor(private spotService: SpotifyService) { }

      ngOnInit() {
        this.searchResult = this.term.valueChanges
          .debounceTime(400)
          .distinctUntilChanged()
          .filter((query: string) =>  query && query.length > 1 ? query.length > 1 : "")
          .switchMap(term => this.spotService.searchMusic(this.term.value).map(res => res.artists.items));
      }
    } 

or maybe you can also null propagation like:

 .filter((query: string) =>  query?.length > 1)