时间戳

首页 > 解决方案 > 如何在 Angular 中使用 ajax 实现搜索？

angular - 如何在 Angular 中使用 ajax 实现搜索？

问题描述

我正在使用网站“ http://jsonplaceholder.typicode.com/posts/ ”进行虚假的 ajax 调用。我想在我的浏览器页面上执行搜索。我已经定义了一个 onSearch() ，它应该接收输入字段（SearchText）的值并执行服务调用以从 url 获取所有数据，然后执行比较并输出匹配的数据。我该怎么做？

我的 project.html ：

我的 project.ts：到目前为止，我还没有实现比较逻辑，也需要帮助。

onSearch(event){
    console.log(event.target.value)

获取数据 project.service.ts 的服务：

searchUsers(searchby:string,searchText:string):Observable<Posts[]>
  {
    return this.httpclient.get<Posts[]>('https://jsonplaceholder.typicode.com/posts')
  }

请帮助。在此先感谢。

标签： angular

解决方案

searchField: FormControl;
form: FormGroup;
post : Post[] = []

constructor(private projectService ProjectService , private fb:FormBuilder){
    this.searchField = new FormControl();
    this.form = fb.group({search: this.searchField});

    this.searchField.valueChanges
      .debounceTime(400)
        .switchMap(term => this.projectService.searchUsers(term))
        .subscribe((resp) => {
            this.posts = resp.filter( // filter logic here)
        });
}

在 html 部分，您可以使用 *ngFor 结构指令来显示项目列表。

推荐阅读