0

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

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

正如我所看到的，这种行为无法通过[(ngModel)]示例中推荐的两种方式绑定来实现。

在我的特定情况下（使用ngrx商店），我希望将所选值（在ng-select下拉列表中）绑定到商店中的值。ngrx因此，当适当的 Action 更改 Store 中的值时，所选值将发生更改。

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

提前谢谢各位。

4

1 回答 1

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

于 2019-02-14T13:49:45.170 回答