Использование typeahead с данными сервера - PullRequest
Новая
       34

Использование typeahead с данными сервера

0 голосов
/ 13 марта 2019

Я использую ng-select с Angular 7 и имею следующий компонент: 

export class PostComponent {

  selectedCategoryId: number;

  categories$: Observable<CategoryModel[]>;

  constructor(private categoryService: CategoryService) { }

  ngOnInit() {

    this.categories$ = this.getCategories('');

  }

  getCategories(term: string): Observable<CategoryModel[]> {

    return this.categoryService.get(term).pipe(map((envelope: Envelope<CategoryMessage.Response>) => 

      envelope.result.map((response: CategoryMessage.Response) => { 

        return {
          id: response.id, 
          name: response.name
        };

      })));

  }

}

categoryService возвращает Categories, где Category Name содержит термин.

На шаблоне у меня есть следующее: 

<ng-select 
   class="select"
   [items]="categories$ | async"
   [addTag]="true"
   bindLabel="name"
   bindValue="id"
   [multiple]="false"
   [(ngModel)]="selectedCategoryId">
</ng-select>

Вопрос

  1. Как я могу вызвать API черезсервис, только когда набранное слово имеет 3 или более букв?Это позволит предотвратить получение тысяч категорий.

  2. Как мне интегрировать мой код для использования typeahead?

1 Ответ

0 голосов
/ 13 марта 2019

Шаблон: 

<ng-select 
   class="select"
   [items]="categories$ | async"
   [addTag]="true"
   bindLabel="name"
   bindValue="id"
   [multiple]="false"
   [(ngModel)]="selectedCategoryId"
   (ngModelChange)="onModelChange($event)">
</ng-select>

Угловой компонент: 

public onModelChange(term) {
   if (term && term.length >= 3) {
      this.getCategories(term).subscribe(categories => {
         // You can put you logic here...
      });
   }
}

РЕДАКТИРОВАТЬ: Может быть, вы также можете взглянуть на debounce функцию, которая очень полезна для предотвращения многих запросов во времяtypehead.Пожалуйста, проверьте это пример .

...