Угловой и нг-выбор.Подтверждение выбранного товара

Question

Я хотел бы заставить работать такой сценарий:

1. Пользователь выбирает элемент в раскрывающемся списке.Но предыдущее значение по-прежнему отображается как выбранное (пока не будет достигнута точка 3).
2. Выбранное значение передается через переменную @Output.
3. Выбранное значение подтверждается в любом другом месте.
4. Выбранное значение устанавливается как текущее в раскрывающемся списке.

Как я вижу, такое поведение не может быть достигнуто при двусторонней привязке к [(ngModel)], как рекомендуется в примерах.

В моем конкретном случае (с использованием ngrx Store) я бы хотел, чтобы выбранное значение (в раскрывающемся списке ng-select) было привязано к значению в хранилище.Таким образом, выбранное значение будет изменено при необходимости ngrx Действие изменяет значение в Магазине.

https://ng -select.github.io / ng-select

Заранее спасибо, ребята.

Answer 1

Решение найдено

Пример шаблона и контроллера компонента.Пожалуйста, прочитайте комментарии в коде.

Шаблон:

<ng-select #select (change)="onChange($event)" ... > ... </ng-select>

Как правило, нам нужна ссылка на компонент и changeобработчик событий.

Контроллер:

@Component(...)
export class NgSelectWrapper implements OnInit, OnChanges
    @Input() value: string | number;
    @Output() changed = new EventEmitter<string>();

    private _selectedValue: string | number;

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.value) {
            // Selected value can be changed only through the @Input field.
            this._selectedValue = changes.value.currentValue;
            // First time itemsList of ng-select component is not initialized,
            // so we need to wait to the next tick to select an item.
            setTimeout(() => this.selectValue(this._selectedValue), 0);
        }
    }

    onChange(event: NewDropdownOptionModel) {
        // Overwrite selection done by the user interaction and select the previous item forcibly.
        // So only ngOnChanges hook can change the selected item.
        this.selectValue(this._selectedValue);
        if (event.id !== this._selectedValue) {
            this.changed.emit(event.id);
        }
    }

    private selectValue(value: string | number): void {
        if (value) {
            if (!this.trySelectItem(value)) {
                this.select.clearModel();
            }
        }
    }

    private trySelectItem(value: string | number): boolean {
        const item = this.select.itemsList.findItem(value);
        return item
            ? (this.select.select(item), true)
            : false;
    }
}

Поэтому нам не нужно использовать [(ngModel)] привязку и обрабатывать выбор элемента вручную.