Angular ng-select - bindValue 不起作用并且仍然绑定(bind)到整个对象

Question

我对 ng-select 有疑问(我使用的是最新版本和 Angular 10)。

我正在创建一个名为 form-row-select-multiple 的通用组件，我将在许多其他组件中使用它。这是此组件的缩短 TS 文件:

  @Input() options: any[] = [];
  @Input() optionKey = 'id'; // in case of options object, specify prop
  @Input() optionKeyText = 'name'; // in case of options object, specify prop to show on option textValue
  @Input() isMultiple = true;
  @Input() selectedValues: any;
  @Output() valueChange: EventEmitter<any> = new EventEmitter();
  elementId: string;

  ngOnInit() {
    if (typeof this.selectedValues === 'object' && this.selectedValues !== null && this.selectedValues.length > 0) {
      this.selectedValues = this.selectedValues.map(value => value[this.optionKey]);
    }
  }

  onChange(event: any) {
    this.valueChange.emit(event);
  }

  trackById(item: any) {
    return item.id;
  }

以及该组件的 HTML:

<ng-select
    [multiple]="isMultiple"
    [id]="elementId"
    [items]="options"
    [(ngModel)]="selectedValues"
    [bindLabel]="optionKeyText"
    [bindValue]="optionKey"
    (add)="onChange($event)"
    [trackByFn]="trackById"
  >

正如您在 TS 文件中看到的，我从另一个组件传递 @Input() 选项，我从服务器异步获取数据。我的问题是，尽管使用 [bindValue]="optionKey"on ，它仍然将其值绑定(bind)到整个对象(当我在 onChange 函数中记录事件值时，它会记录整个对象)。

BindLabel 工作正常，所以我不确定为什么 bindValue 不行。我认为可能是因为 [(ngModel)]="selectedValues"也是对象，所以我在 ngOnInit 中实现了一个逻辑，如果 selectedValues 是对象，我将从中做一个简单的数组。但这并没有解决我的问题。

请问您知道问题出在哪里吗？控制台中没有显示错误。谢谢你的所有想法。

Answer 1

bindValue 选项确定绑定(bind)到 ngModel 绑定(bind)的变量持有的模型，而不是 add 事件发出的事件.因此，您可以发出 ngModel 绑定(bind)变量。

尝试以下操作

ngOnInit() {
}

onChange(event: any) {
  this.valueChange.emit(this.selectedValues);
}

add 事件仅在将选项添加到列表时触发，而不是每次更改该值时触发。为此，您需要使用 change 事件。

工作示例:Stackblitz