ngbtypehead с динамическими данными в угловых 2 - PullRequest
Новая
       4

ngbtypehead с динамическими данными в угловых 2

0 голосов
/ 24 сентября 2019

Я ссылался на этот пост: Извлечение данных из Json для ng-bootstrap typeahead , но мне не удалось найти бесшовное решение для моей проблемы

У меня следующий сервисный вызов вкомпонент службы angular. 

  public search(jsonReq) {
    let response: any = {};
    let body: any = {
      json: jsonReq
    };
    this.http.doPost('/searchUrl', body).then(
       (data: any) => {
          if (data.statusCode === 0) {
            this.subject.next(<ServiceObject>{ type: ServiceType.TABLE_SEARCH, response: data, request: body });
          } 
          }
    });
  }

export enum ServiceType{
  TABLE_SEARCH = 'ServiceType.TABLE_SEARCH',
}

Указанный выше сервис возвращает данные из БД, которые я хочу использовать в компоненте angular ngbtypeahead, в раскрывающемся списке.

Компонент ngbtypeahead в настоящее время получает следующее:ниже приведен поиск, наблюдаемый в ngbtypeahead. 

   search = (text$: Observable<string>) =>
        text$
          .debounceTime(200)
          .distinctUntilChanged()
          .map(term => {
            if (term.length >= 3 ) {
              this.onKeyDownSearchForModel(term);
            }

            if (term.length >= 3) {
              let res = this.displayData.map(ele => ele['display_name']);
              return res.sort().filter(v => v.toLowerCase().includes(term.toLocaleLowerCase())).splice(0, 8)
            } 

            else {
              return ['Enter 3 or more chars...']
            }
          });

, который извлекает данные из службы следующим образом: 

 onKeyDownSearchForModel(val) {
    let searchText = '';
    let json = {};

    json = {
      type: "property",
      component_id: "12345", 
      search: val
    }

      this._service.search(json);
      this._serviceMetaDataSubscription = this._service.getObservable().subscribe(event => {
        switch (event.type) {
          case ServiceType.TABLE_SEARCH:
            if (event.response.statusCode === 0) {
                this.setData(event.response);

            }
            break;
          }
      });

  }

setData(data) {
    let res = data.result;
    this.displayData = res;
  }

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

Я знаю, что мне нужно сделать так, чтобы использовалась команда поиска, но я не могу этого добиться, так как я довольно плохо знаком с операторами RxJS.Любая помощь будет оценена.

Спасибо

...