rxjsフィルタで最小入力長を保証する方法

Question

Angular formcontrolでfilterプロパティを使用しようとしています。

これはコードです：

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

私はこのエラーを取得するフィルタを設定しようとすると：

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

こんにちは、私はあなたの問題は機能.distinctUntilChanged()は戻らないということだと思いますあなたは.filter()メソッドを添付することができます。しかし、これを試すことができます：

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

、または次のような伝播も可能です：

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