具有可搜索ajax结果的Angular 7/8多选功能

Question

我有一个问题，如何选择正确的方式。

我正在使用multiselect，但是我不满意它如何与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，当有人尝试搜索某些内容时，multiselect会发出filter事件。父组件执行ajax调用并更新其自己的变量。

但这只是不灵活。有没有更好的方法来实现这一目标？我当时想传递数据源，但这似乎也不灵活。显然不建议使用传递功能...