属性 'distinctUntilChanged()' 在类型 MonoTypeOperatorFunction<{}> Rxjs6 上不存在

Question

我正在尝试创建一个实时搜索输入的搜索服务。我有 search.service.ts :

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

import { Observable } from 'rxjs';
import { map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SearchService {

  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(terms: Observable<string>) {
    return terms.pipe(debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term)));
  }

  searchEntries(term) {
    this.http.get(this.baseUrl + this.queryUrl + term).pipe(map(res => {
      res.json();
    }))
  }
}

和 app.component.ts:

import { Component } from '@angular/core';
import { SearchService } from './search.service';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [SearchService]
})
export class AppComponent {
  results: Object;
  searchTerm$ = new Subject<string>();

  constructor(private searchService: SearchService) {
    this.searchService.search(this.searchTerm$)
      .subscribe(results => {
        this.results = results.results;
      });
  }
}

我在 search.service.ts 属性中遇到问题 'distinctUntilChanged()' 在类型 MonoTypeOperatorFunction<{}> 上不存在。我怎样才能解决这个问题？请给出建议。

已编辑 下面的代码解决了这个问题。

search(terms: Observable<string>) {
        return terms.pipe(debounceTime(400),
            distinctUntilChanged(),
            switchMap(() => interval(50), term => this.searchEntries(term)));
    }

你可以访问我这个项目的代码on github

Answer 1

您对 pipe 的调用不正确。管道中的运算符应该是分开的，而不是被 .:

链接

return terms.pipe(debounceTime(400),
  distinctUntilChanged(),
  switchMap(term => this.searchEntries(term)));

属性 'distinctUntilChanged()' 在类型 MonoTypeOperatorFunction<{}> Rxjs6 上不存在

Property 'distinctUntilChanged()' does not exist on type MonoTypeOperatorFunction<{}> Rxjs6

typescript

angular6

rxjs6