Пример Typeahead в Angular отправляет пустой параметр в BackEnd - PullRequest
Новая
       0

Пример Typeahead в Angular отправляет пустой параметр в BackEnd

0 голосов
/ 22 января 2019

Я пытаюсь адаптировать следующий пример ссылка для моего приложения углового интерфейса.

Он должен запустить запрос get в мой бэкэнд с параметром поиска из поля ввода.Он всегда запускает вызов GET для моего бэкэнда после ввода, но параметр всегда представляет собой пустую строку.

Ниже моего кода:

app.component.ts: 

export class AppComponent implements AfterViewInit {

    searchBox = null;
    autoComplete = null;

    constructor(private apiService: ApiService) { }

    ngAfterViewInit(): void {
        this.searchBox = document.getElementById('searchBox');

        this.autoComplete = fromEvent(this.searchBox, 'input').pipe(
          map((e: KeyboardEvent) => (<HTMLTextAreaElement>e.target).value),
          filter(text => text.length > 2),
          debounceTime(250),
          distinctUntilChanged(),
          switchMap(s => this.apiService.autoComplete(s))
        );
    }
}

app.component.html: 

<code><div>
  <input type="text" id="searchBox">

  <pre>
    {{autoComplete | async | json}}

api.service.ts: 

export class ApiService {
     autoComplete(s: string): Observable<KeyNames[]> {
        const params = new HttpParams();
        params.append('search', s);

        return this.httpClient.get<KeyNames[]>(this.API_URL + '/tags/autoComplete', {params})
          .pipe(
            catchError(this.handleError('autoComplete', []))
          );
      }
}

Может кто-нибудь сказать мне, почему мой автозаполнение () функция всегда вызывается с пустой строкой?

1 Ответ

0 голосов
/ 22 января 2019

Проблема здесь, вероятно, связана с методом append, потому что он возвращает HttpParams, это может означать, что вы должны сделать: 

let params = new HttpParams();
params = params.append('search', s);

или просто: 

const params = new HttpParams().set('search', s);
...