Refre sh список данных в поле зрения после того, как пользователь закончит ввод текста в текстовом поле Angular 7

Question

Я пытаюсь обновить sh список данных в представлении после ожидания, пока пользователь завершит sh ввод текста в текстовое поле и обновление результатов. Пробовал с директивами angular, пробовал с Observable и различными таймаутами и ошибками, и не повезло. У меня закончились варианты.

В файле html:

            <input type="text" class="form-control" id="Other"  
            (keyup)="onKeySearch($event)" list="dynamicList" formControlName="Other"/>

            <datalist id="dynamicList">
                <option *ngFor="let employee of employeesList" [value]="employee.Name">
                    {{employee.Name}}</option>
            </datalist>

в файле .ts:

  public employeesList: EmployeeData[] = [];

  timeout: any = null;

  getEmployeesList(name : string) {
      let empList: EmployeeData[] = [];

      // get employees list from service 
      this.employeeService.getEmployeesList(name).subscribe((data: any) => {
        empList = data;
        console.log(empList)
      })
      return empList;
    }

  public onKeySearch(event: any) {
    let empListt: EmployeeData[] = [];

    clearTimeout(this.timeout);
    var $this = this;
    this.timeout = setTimeout(() => {
        empListt = $this.getEmployeesList(event.target.value);
        console.log(empListt)
    }, 1000);
    this.employeesList = empListt;
  }

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

Я добавил пример кода stackblitz с аналогичным кодом, как указано выше (такое же поведение):

.ts файл:

import { Component, VERSION, OnInit } from "@angular/core";
import { FormControl } from "@angular/forms";
import { distinctUntilChanged, debounceTime, tap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  searchControl = new FormControl("");
  message = "";
  public employeesList: string[] = [];

  ngOnInit() {
    this.searchControl.valueChanges
      .pipe(
        tap(() => (this.message = "User is typing...")),
        distinctUntilChanged(),
        debounceTime(1000)
      )
      .subscribe(res => {
        this.message = "User finished typing!";
        this.employeesList.push('1');
        this.employeesList.push('2');
        this.employeesList.push('3');
      });
  }
}

. html файл:

<input [formControl]="searchControl" list="dynamicList">

<datalist id="dynamicList">
    <option *ngFor="let employee of employeesList">
        {{employee}}</option>
</datalist>

<span> {{message}} </span>

Answer 1

Выпадающий список будет отфильтрован в соответствии с введенным вами текстом. Итак, в данном примере, поскольку вы поместили в список значения 1,2 и 3, в раскрывающемся списке будет отображаться только отфильтрованное значение.

Например. если вы введете 1, в раскрывающемся списке будет 1 (что является обязательной функциональностью)

Вы можете ясно увидеть это поведение, если немного измените тестовый ввод как:

  ngOnInit() {
    this.searchControl.valueChanges
      .pipe(
        tap(() => (this.message = "User is typing...")),
        distinctUntilChanged(),
        debounceTime(1000)
      )
      .subscribe(res => {
        this.message = "User finished typing!";
        this.employeesList.push('Employee 1');
        this.employeesList.push('Employee 2');
        this.employeesList.push('Employee 3');
      });
  }

Теперь , при поиске «Сотрудник» будут перечислены все 3, а при поиске «Сотрудник 1» будет указана только необходимая запись. ( Ожидаемое поведение )

Answer 2

Ваш formControl (по какой-то причине названный «Другой») имеет event, который выдается как Observable при каждом изменении. Вы можете subscribe для этого события и использовать оператор Rx JS debounceTime(), чтобы указать, сколько миллисекунд он должен ждать, пока пользователь перестанет печатать, пока событие не будет сгенерировано.

Я создал простой DEMO , может проще разобраться.

Удачи!