Угловой мультиселект 7/8 с результатами поиска ajax - PullRequest
Новая
       20

Угловой мультиселект 7/8 с результатами поиска ajax

0 голосов
/ 01 июня 2019

У меня есть вопрос, как сделать такой выбор правильным образом .

У меня работает множественный выбор, но я не удовлетворен тем, как он работает с ajax. Вот кусок кода: 

<input type="text" class="form-control form-control-sm"
  [(ngModel)]="searchFilter" placeholder="{{labels.search}}"
  (ngModelChange)="updateSearchFilter($event)"/>

Затем в компоненте: 

    searchFilter = '';
    searchFilterChanged = new Subject<string>();

    @Input() options: any[] = [];
    @Output() filter = new EventEmitter<string>();

    constructor(
        protected eRef: ElementRef
    ) {
        this.searchFilterChanged.pipe(
            debounceTime(1000),
            distinctUntilChanged()
        ).subscribe(this.searchFilterChange.bind(this));
    }

    searchFilterChange(value) {
        console.log(value);
        this.filter.emit(value);
    }

    updateSearchFilter($event) {
        this.searchFilterChanged.next(this.searchFilter);
    }

    filterOptions() {
        if (this.customFilter) {
            return this.options;
        }

        const result = this.options.filter(this.search());

        return result;
    }

В основном это работает так. В родительском компоненте я передаю переменную options, когда кто-то пытается что-то искать, множественный выбор приводит к событию filter. Родительский компонент выполняет вызов ajax и обновляет свою собственную переменную.

Но это просто не гибко. Есть ли лучший способ добиться этого? Я думал о передаче источника данных, но это тоже не похоже на гибкость. Проходная функция, видимо, не рекомендуется ...

...