Ошибка типа: не удается прочитать свойство 'pipe' из неопределенного

Question

Я пишу функцию поиска в реальном времени на Angular с помощью RxJS. Я получаю сообщение об ошибке, так как TypeError: Невозможно прочитать свойство pipe из undefined. Я использую Angular 7 и пробовал разные примеры кода из StackOverfloew, но не смог решить эту проблему.

app.Component.html

<input type='text' class="form-control input-txt-start" placeholder="Search Domain Name" name="domainId" (keyup)='getSearchResults(searchTerm$.next($event.target.value))'>

<ul *ngIf="results">
    <li *ngFor="let result of results | slice:0:9">
        {{ result}}
    </li>
</ul>
<p *ngIf="error">
    {{error}}
</p>

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl } from '@angular/forms';
import { SearchService } from 'src/app/services/search.service';
import { Subject } from 'rxjs';

@Component({
  ...
  providers: [SearchService]
})

export class AppComponent implements OnInit { 
  results: Object;
  searchTerm$: any = new Subject();
  error: any;

  constructor(private searchService: SearchService) { }

  ngOnit() { }

  getSearchResults(search) {
    this.searchService.search(search).subscribe((res) => {
      console.log(res);
      this.results = res;
    }, err => {
      console.log(err);
      this.error = err.message;
    });
  }
}

search.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { distinctUntilChanged } from 'rxjs/operators';
import { map } from 'rxjs/operators';
import { switchMap } from 'rxjs/operators';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})

export class SearchService {
  public httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };

  baseUrl: String = `${environment.API_URL}/api/domainCharts`;
  queryUrl: String = '?search=';

  constructor( private http: HttpClient ) { }

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

  searchEntries(term) {
    return this.http.get(`${this.baseUrl}${this.queryUrl}${term}`);
  }
}

Answer 1

Есть более чем одна вещь, которая не соответствует вашим запросам.

Во-первых, вы проходите Subject и ожидаете Observable.Вот почему вы получаете ошибку

TypeError: Невозможно прочитать свойство 'pipe' из неопределенного

Затем вы передаете Subject как term (я полагаюВы хотите отправить ключевое слово для поиска).

Вам не нужен Subject в вашей ситуации.Вы можете сделать это так:

Шаблон:

<input type='text' class="form-control input-txt-start" placeholder="Search Domain Name" name="domainId" (keyup)='getSearchResults($event)'>  <---- Send only $event here

Компонент:

getSearchResults(event) {
    this.searchService.search(event.target.value).subscribe((res) => { // <--- Get target value of event
      console.log(res);
      this.results = res;
    }, err => {
      console.log(err);
      this.error = err.message;
    });
  }
}

Сервис:

search(term) {  // <--- Notice that the parameter name became term instead of terms

    // You can use of() method of RxJS
    // You need to import of with "import { of } from 'rxjs';"
    // You can chain you operators in pipe() method with commas

    return of(term).pipe(
       debounceTime(500),
       distinctUntilChanged(),
       switchMap(() => this.searchEntries(term) // <--- Notice that, this function has no parameter
     );
  }