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

【问题标题】：Angular ng-select - bindValue don't work and still binds to whole objectAngular ng-select - bindValue 不起作用，仍然绑定到整个对象
【发布时间】：2020-08-04 13:00:32
【问题描述】：

我在使用 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 是对象，我会从中做一个简单的数组。但这并没有解决我的问题。

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

【问题讨论】：

你能说一下预期吗？您是否希望发出 ID 数组而不是整个对象？
@MichaelD 是的，我想发出 ID 数组，而不是选定对象的数组。
我已经发布了答案。

标签： angular angular-forms angular-ngselect

【解决方案1】：

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

试试下面的

ngOnInit() {
}

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

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

工作示例：Stackblitz

【讨论】：

非常感谢，它有效。我已经为此苦苦挣扎了 2 个小时，非常感谢您:)。
我还删除了 onInit 中的 selectedValue 部分，并用 compareWith 函数替换了它。