Как реализовать поиск с использованием ajax в angular?

Question

Я использую веб-сайт "http://jsonplaceholder.typicode.com/posts/", чтобы совершать поддельные ajax звонки. Я хочу выполнить поиск на странице моего браузера. Я определил onSearch (), который должен получить значение поля ввода (SearchText) и выполнить вызов службы, чтобы получить все данные из URL, а затем выполнить сравнение и вывести сопоставленные данные. Как я могу это сделать?

Мой проект. html:

Мой project.ts: на данный момент я не реализовал logi c, для сравнения тоже нужна помощь по этому вопросу.

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 структурную директиву для отображения списка элементов.