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。
这是一个stackbliz示例：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);
  }
}

然后您可以进行一些防抖操作，以防止被称为

带http请求的角度多输入搜索请求

1 个答案: