Question

我正在使用网站“ 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')
  }

请帮助。谢谢。

Answer 1

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结构化指令来显示项目列表。

如何在角使用ajax实现搜索？

1 个答案: