Наблюдаемый тип ngx-bootstrap

Итак, у меня есть поле ввода с опережением, которое выглядит так:

<input formControlName="segment"
              [typeahead]="segments"
              (typeaheadLoading)="segmentsLoading($event)"
              (typeaheadNoResults)="segmentsNoResults($event)"
              (typeaheadOnSelect)="segmentOnSelect($event)"
              typeaheadOptionsLimit="10"
              typeaheadMinLength="3"
              typeaheadWaitMs="300"
              [typeaheadItemTemplate]="customSegmentTemplate"
              class="form-control">

И Observable, который помогает мне заблаговременно получать предложения.

this.segments = Observable.create((observer: any) => observer.next(this.segments))
  .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value);

Моя проблема в том, что Observable отправляет запрос, даже если длина значения моего поля ввода меньше 3, даже если я установил typeaheadMinLength="3". Это происходит, когда пользователь вводит значение, а затем быстро удаляет некоторые символы (быстрее, чем время моего устранения неисправности), а затем пытается ввести новое значение. Мой API для предложений не работает, когда он получает входное значение длиной менее 3, а затем мое приложение ломается, и мне нужно обновить страницу, чтобы она снова заработала. Я попытался установить время отладки на 0, и тогда у меня не было этой проблемы, но это плохая практика, и она отправляет слишком много запросов к моему API. Есть идеи, как это решить?


typescript angular ngx-bootstrap angular2-observables
person banana    schedule 03.07.2017    source источник
comment
Я добавил такой блок catch this.segments = Observable.create((observer: any) => observer.next(this.segments)) .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value)) .catch((error: any) => { return []; }); Это решило мою проблему на данный момент, но я уверен, что есть лучшее решение, чем это.   -  person banana    schedule 13.07.2017
comment
У меня точно такая же проблема, вы когда-нибудь в этом догадывались?   -  person NotSimon    schedule 16.09.2017
comment
@Simon Я решил это, как в комментарии выше, и он работает, по крайней мере, до тех пор, пока я не найду более элегантное решение. Но более элегантного решения пока не найдено.   -  person banana    schedule 17.09.2017
comment
Вы смотрели перехватчики в новом Angular HttpClient?   -  person ksimonson10    schedule 07.11.2017
comment
@ ksimonson10 Я посмотрел на это сейчас, когда вы упомянули об этом, но о какой версии angular HttpClient вы думаете? Я где-то читал, что (с версией 4.3) я не могу применять перехватчик только к определенным запросам, а не глобально, и это то, что мне нужно.   -  person banana    schedule 07.11.2017
comment
@banana Я сам еще не реализовал, планирую скоро, но думаю, вы правы.   -  person ksimonson10    schedule 07.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Вот набросок обхода, который может помочь, пока не исправят элемент управления:

Подключите оператор фильтра до того, как ваш наблюдаемый вызовет сервисный вызов:

this.segments = Observable.create((observer: any) => observer.next(this.segments))
    .pipe(filter(number => number.length >= YOUR_MIN_LENTH_LIMIT),
    .mergeMap((number: string) => this.suggestionsService.getSegmentSuggestions(this.editForm.get('segment').value));
person G. Stoynev    schedule 01.03.2019

arrow_upward
0
arrow_downward

Это должно быть [typeaheadMinLength]="3" instead of typeaheadMinLength="3". Когда вы назначаете его как typeaheadMinLength="3", оно становится строковым.

Вы можете использовать [typeaheadWaitMs]="500", он вызовет вызов api после 500 мс ввода пользователя. Что вроде ведет себя как debounce.

person sunder    schedule 23.12.2017
comment
У меня это не сработало. Он по-прежнему отправлял запрос в questionsService, когда длина ввода была равна 1. - person banana; 25.12.2017