DifferentUntilChanged создает изменения в результатах

Question

• У меня есть код поисковой системы в angular2.
• когда я выбираю результаты поиска, мне нужно отобразить значения в текстовом поле с крестиком рядом с ним.
• сейчас я получаю результаты.
• но когда я впервые набираю h, я получаю некоторые результаты, когда я набираю m во второй раз, я вижу некоторые результаты, но когда я набираю h в третий раз, я не вижу увидеть любые результаты.
• это из-за метода distinctUntilChanged или вы можете сказать мне, как исправить ошибку?
• предоставив мой код и блиц стека ниже
• Можете ли вы помочь мне.
• чтобы в будущем я мог реализовать себя.

https://stackblitz.com/edit/angular6-jbnrru?file=app%2Fsearch-service.ts

search(terms: Observable<string>) {
    return terms.debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));
  }

  searchEntries(term) {
    return this.http
        .get(this.baseUrl + this.queryUrl + term)
        .map(res => res.json());
  }

Answer 1

Код rxjs довольно хорош, использование debounceTime и switchMap такое же, как я бы использовал.

app.component

Основная проблема заключается в том, что вы реагируете на отдельные ключи, когда было бы лучше (и меньше кода) реагировать на событие input.

Вы также можете обнаружить, что он лучше работает с пользовательскими действиями, не связанными с клавиатурой, такими как selectAll + cut и сенсорными событиями.

шаблон

<input [(ngModel)]="nameModel" 
  (input)="onInput($event)" 
  placeholder="Enter Tag Name">

Обработчик

onInput(event) {
  const searchTerm = event.target.value;
  console.log('value', searchTerm);
  this.results$ = this.searchService.search(searchTerm)
}

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

компонент

export class AppComponent {
  //results: Object;
  results$: Observable<string[]>

шаблон

<ul>
  <li *ngFor="let result of ((results$ | async) | slice:0:9)"   

---

Поиск-service.ts

Служба также может использовать некоторые настройки.

Если вы передадите ненаблюдаемую строку поиска, а затем закроете ее в Observable.of() перед отменой, вы можете удалить код Subject из компонента.

Компоненты должны быть максимально тупыми, чтобы упростить тестирование и упростить их модификацию для новых функций.

Я также деструктурировал объект результатов и просто вернул массив. Причина этого состояла в том, что пустой поисковый термин инициировал поиск, когда мы уже знаем, что результатом для пустого поискового термина должен быть пустой массив.

@Injectable()
export class SearchService {
  baseUrl: string = 'https://api.cdnjs.com/libraries';
  queryUrl: string = '?search=';

  constructor(private http: Http) { }

  search(term: string) {
    return Observable.of(term)
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));
  }

  searchEntries(term) {
    return term
      ? this.http
          .get(this.baseUrl + this.queryUrl + term)
          .map(res => res.json().results)
      : Observable.of([]);
  }
}

StackBlitz