Angular ng-select - bindValue 不起作用，仍然绑定到整个对象

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 ，它仍然将其值绑定到整个对象（当我在 onChange 函数中记录事件值时，它记录整个对象）。

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

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

Answer 1

bindValue 选项确定绑定到 ngModel 绑定的变量持有的模型，而不是 add 事件发出的事件。所以你可以改为发出 ngModel 绑定变量。

尝试以下方法

ngOnInit() {
}

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

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

工作示例：Stackblitz

Angular ng-select - bindValue 不起作用，仍然绑定到整个对象

Angular ng-select - bindValue don't work and still binds to whole object

angular-ngselect

angular

angular-forms