Блог

Главная - Вопросы по программированию - Угловая 12 функция автозаполнения не запускается при изменении наблюдаемого значения

Угловая 12 функция автозаполнения не запускается при изменении наблюдаемого значения

#autocomplete #observable #angular12

Вопрос:

Я пытаюсь реализовать функцию автозаполнения в Angular 12 и совершенно заблудился. У меня есть служба http, которая извлекает массив объектов типа ингредиентов.

   public search(term: string): Observable<Ingredient[]> {
    let url: string = `${this.apiBaseUrl}/ingredients/search?term=${term}`;
    return this.http
      .get<Ingredient[]>(url)
      .pipe(tap((data: any) => (this.opts = data)));
  }

В моем ingredient-list.component.html компонент У меня есть этот код для получения списка ингредиентов после каждой записи в поле ввода формы.

   ingredients$!: Observable<Ingredient[]>;
  searchForm = this.fb.group({
    search: [''],
  });

И в моем конструкторе :

     this.ingredients$ = this.searchForm.get('search')!.valueChanges.pipe(
      map((term: any) => term.trim().toLowerCase()),
      startWith(''),
      distinctUntilChanged(),
      debounceTime(300),
      switchMap((term) => this.ingredientsDataService.search(term))
    );

Но с помощью этого кода моя служба никогда не запускается. Как будто ничего не происходит после изменения значений. Если я добавлю услугу подписки, она будет запущена, но я не смогу найти свои данные.

заранее благодарю вас за вашу помощь

Метки: