Angular 和 ng-select。确认 selected 项

Question

我想开始工作这样的场景：

用户在下拉列表中选择了一个项目。但之前的值仍显示为已选择（直到点 3 成功）。
通过 @Output 变量发出的选定值。
选择的值在任何其他地方确认。
在下拉列表中将所选值设置为当前值。

如我所见，无法按照示例中的建议通过两种方式绑定到 [(ngModel)] 来实现此行为。

在我的特定情况下（使用 ngrx 商店），我希望将所选值（在 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)] 绑定并手动处理项目的选择。

Angular 和 ng-select。确认 selected 项

Angular and ng-select. Confirmation on selected item

angular-ngselect

ngrx

angular