Как искать значение в ngselect? - PullRequest
Новая
       34

Как искать значение в ngselect?

1 голос
/ 15 мая 2019

Из Api я получаю countryName и код, как показано ниже

например: - 

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

Я хочу использовать раскрывающийся список ngSelect и хочу отобразить значение, например, countryName (code) в раскрывающемся списке.

например: Индия (IND)

Вопрос: - Я хочу объединить countryName и код .И хотите отфильтровать раскрывающееся значение на основе и countryName и кода .Ниже приведен код, который я пробовал.Но он не работает должным образом

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;
   }

Кто-нибудь может дать мне решение для поиска?

1 Ответ

1 голос
/ 15 мая 2019

Я взял ваш код и поместил его в 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", которое выдало ошибку «Нет поставщика для NgControl». Ошибка имеет смысл, я не реализовал NgControl.

Теперь АБВ дает вам Арубу, а Ару тоже дает вам Арубу. (Это то, что вы хотите, верно?)

...