如何在 ngselect 中搜索值？

Question

从Api，我得到国家名称和代码如下

例如：-

  countryName        code
  -----------------------
  India              IND
  United States      USA
  Aruba              ABW

我想使用 ngSelect 下拉菜单，并希望在下拉菜单中显示国家名称（代码）等值。

例如：印度 (IND)

问题：- 我想连接 countryName 和 code。并希望根据 国家名称和代码 过滤下拉值。下面是我试过的代码。但是它不能正常工作

component.html

  <ng-select [items]="countries" bindLabel="description" bindValue="code"
           clearAllText="Clear" formControlName="countryCode"
          [searchFn]="customSearchFn">
      <ng-template ng-label-tmp let-item="item">
          <span >{{ item.countryName + ' (' + item.code + ')' }}</span>
      </ng-template>
      <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
           <span >{{ item.countryName + ' (' + item.code + ')' }}</span>
      </ng-template>
   </ng-select>

component.ts

getCountry() {
this.lookupService.getCountry().subscribe(
  data => {
    this.countries = data;
  });
 }

customSearchFn

customSearchFn(term: string, item: Lookup) {
  term = term.toLocaleLowerCase();
  return item.code.toLocaleLowerCase().indexOf(term) > -1 || item.countryName.toLocaleLowerCase() === term;
   }

任何人都可以给我一个搜索的解决方案吗？

Answer 1

我把你的代码放到了 Stackblitz 中。它实际上几乎起作用了！我只是对搜索功能做了一个小改动：

customSearchFn(term: string, item: any) {
    term = term.toLocaleLowerCase();
    return item.code.toLocaleLowerCase().indexOf(term) > -1 || 
           item.countryName.toLocaleLowerCase().indexOf(term) > -1;
}

（countryName 和代码都使用 indexOf 而不是 item.countryName.toLocaleLowerCase() === term）

我删除的唯一另一项是 formControlName="countryCode"，这给了我一个错误 "No provider for NgControl"。这个错误是有道理的，我还没有实现 NgControl。

现在，ABW 为您提供 Aruba，Aru 也为您提供 Aruba。（这就是你想要的，对吧？）

Answer 2

我通过在我的 ts 中声明这个数组解决了这个问题：

countries = [
    { countryName: "India", code: "IND" },
    { countryName: "United States", code: "USA" },
    { countryName: "Aruba", code: "ABW" }];

我像这样将 ng-select 添加到我的 html 以及 class:

<ng-select
    bindLabel="description"
    class="searchable_select" 
    (change)="changed($event)">
    <ng-option *ngFor="let item of countries" [value]="item">
        {{ item.countryName + ' (' + item.code + ')' }}
    </ng-option>
</ng-select>

修改后的功能只是显示选中项的值。

最重要的是，SCSS class:

.searchable_select {
  .ng-input {
    display: flex;
    align-items: center;
  }
}

你也可以添加为CSS，当然：

.searchable_select .ng-input {
  display: flex;
  align-items: center;
}

如何在 ngselect 中搜索值？

How to search value in ngselect?

angular-ngselect

angular

angular5

angular7