Question

我正在尝试创建搜索服务以实时输入信息。我有 ItemTable: ID Col ColOther Latest Time 100 'old' 'oldother' 0 <Autogenerated timestamp> 250 'new' 'newother' 1 <Autogenerated timestamp> ProductTable: ID ItemID Value ValueOther Latest Time 12 100 'foo' 'bar' 0 <Autogenerated timestamp> 110 250 'foo' 'bar' 1 <Autogenerated timestamp> ：

$.ajax({
       type: 'POST',
        url: 'your url',
        data: $('#tambah_karyawan').serialize(),
        success: function () {

    }
});

和 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中遇到问题类型MonoTypeOperatorFunction <{}> 上不存在属性'distinctUntilChanged（）'。我怎样才能解决这个问题？请提出建议。

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

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

您可以访问我的项目on github代码

Answer 1

您对pipe的呼叫不正确。管道中的运算符应该分开，而不是由.链接：

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

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

1 个答案: