Angular 6/7/8 ngbtypeahead返回匹配和不匹配的记录

时间:2019-12-28 08:12:16

标签: angular angular-material typeahead rxjs-observables

我正在从REST API记录,并以输入类型的形式将其显示为预先输入功能,在发出API调用之前,我必须至少输入3个字母。

这是我的HTML代码

<mat-form-field>                                
    <mat-label translate>Color</mat-label>
        <input matInput #coatcolor="ngModel" name="coatcolor [(ngModel)]="coat.color"
              [resultFormatter]="productFormatter" [inputFormatter]="productInputFormatter"
              [ngbTypeahead]="productColorSearch" [editable]="false" />                           
</mat-form-field>

这是我从API收到的响应

[
  { 
     "color": "ALUMINIUM"
  }
]

这是打字稿文件

  productColorSearch = (text$: Observable<string>) => {
  return text$.pipe(
  debounceTime(750),
  distinctUntilChanged(),
  switchMap((searchText) => searchText.length < 3 ? [] : 
  this.facadeService.getProductColorsOnSearch(searchText))
  );
}

productFormatter = (result: any) => result.color;
productInputFormatter = (result: any) => result.color;

现在,当我输入前三个字母时,我应该在下拉列表中仅得到一个记录,即“ ALU MINIUM” 取而代之的是,我得到了以下所有记录,包括 ALU MINIUM +其他颜色。

对此表示感谢的任何帮助

0 个答案:

没有答案