Angular запрос на множественный ввод с запросом http

Question

Я учусь, как использовать Angular с API, и у меня есть окно поиска, где я могу искать данные, теперь я хочу сделать несколько поисков, как если бы я делал поиск и получал результат и очищал и введите другое ключевое слово. Я все еще получаю результат, но не получаю его после.

app.component. html

<input id="search" type="text" placeholder=""  [(ngModel)]="inputKeyword" name="search" />

app.component.ts

searchData() { 
 this.results = this.googleService.getGoogle(this.inputKeyword)
  .subscribe(x =>{
    this.googleData = x.items;
    console.log('googleData', this.googleData);
      }, error => {
     console.log("error here",error)
   })
}

Answer 1

Попробуйте что-то вроде этого .. Предполагая, что последняя версия (версии) Angular.
Вот пример стекаблиза: https://angular-j19wsj.stackblitz.io

в app.component. html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
Enter search value:  
<input type="text" name="search" (keyup)="search($event)">
<br>

<ng-container *ngIf="(data$ | async) as data">

  <ul>
    <li *ngFor="let x of data">{{x}}</li>
  </ul>

</ng-container>

Затем в app.component.ts

import { Component } from '@angular/core';
import { Subject, Observable, of } from 'rxjs';
import { switchMap } from 'rxjs/operators';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  searchValue$ = new Subject<string>();
  data$: Observable<string[]>;

  testData = [
    'mike',
    'john',
    'john doe',
    'susan',
    'susie'
  ]

  constructor(){

    this.searchValue$.pipe(
      switchMap(sv=>{
        //reeturn apiservice.get(searchvalue);
        console.log('sv is' ,sv)
        return of(this.testData.filter(x=>x.startsWith(sv)));
      })
    ).subscribe(result=>{
      this.data$ = of(result);
    })
  }

  search(e:KeyboardEvent){
    this.searchValue$.next(e.target.value);
  }
}

И затем вы можете добавить некоторую отладку, чтобы избежать слишком большого количества вызовов