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)]绑定并手动处理项目的选择。

角度和ng-select。确认所选项目

1 个答案: