时间戳

首页 > 解决方案 > 对服务器数据使用预先输入

angular - 对服务器数据使用预先输入

问题描述

我在 Angular 7 中使用ng-select并具有以下组件：

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. 仅当键入的单词有 3 个或更多字母时，如何通过服务调用 API？这是为了防止获得数千个类别。

  2. 如何集成我的代码以使用 typeahead？

标签： angularangular6angular7angular-ngselect

解决方案

模板：

<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对于防止打字头期间出现许多请求非常有用的功能。请检查这个例子。

推荐阅读