filterOptions в автозаполнении не работает - PullRequest
Новая
       25

filterOptions в автозаполнении не работает

0 голосов
/ 12 октября 2018

У меня есть demo

Когда я нажимаю +, я могу отфильтровать состояние и правильно отобразить имя состояния.Когда я снова нажимаю +, чтобы добавить состояние, фильтр не работает.

У меня есть этот код фильтра: 

this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(''),
    map(state =>  this._filterStates(state))
  );

Любая идея, пожалуйста?

1 Ответ

0 голосов
/ 12 октября 2018

Возможно, не лучшее решение, но оно работает.

Итак, проблема в том, что после добавления дополнительных полей значение массива формы начинает выглядеть так: ["3", "P"] и ваша функция фильтра перестает работать.

Итак, если вы хотите сохранить свой подход с отслеживанием значений формы как наблюдаемых, я создал пользовательский канал, который выполняет фактическую фильтрацию. 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myPipe'
})
export class MyPipe implements PipeTransform {

  transform<T>(value: string, list: T[], field: string, idx: number): T[] { 
    const filterValue = value[idx] ? value[idx].toString().toLowerCase() : '';
    return list.filter(state => state[field].toLowerCase().indexOf(filterValue) === 0);
  }

}

Тогда вместо

*ngFor="let state of filteredStates | async

вы используете канал

*ngFor="let state of filteredStates | async | myPipe: states : 'products_name': i"

Это более или менее универсально, поэтому для поиска требуется список состояний и поле.

Также в вашем компоненте замените 

   this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(''),
    map(state =>  this._filterStates(state))
  );

на 

   this.filteredStates = this.myform.controls['products_id'].valueChanges
  .pipe(
    startWith(['']),
  );

Таким образом, мы просто используем изменения значений в качестве наблюдаемых.Очевидно, некоторые переменные должны быть переименованы.

И это все.Пожалуйста, прокомментируйте, если это не работает, и я пропустил что-то добавить.

О, и да - не забудьте добавить пользовательский канал в ваши объявления AppModule 

import { MyPipe } from './app/my-pipe.pipe';
...
declarations: [
    AutocompleteOverviewExample,
    MyPipe
],
...