Angular ng-select - bindValue не работает и по-прежнему привязывается ко всему объекту

У меня проблема с 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 ​​​​являются объектами, я сделаю из этого простой массив. Но это не решило мою проблему.

У вас есть идеи, где может быть проблема? Никаких ошибок в консоли не появляется. Спасибо за все идеи.


angular angular-forms angular-ngselect
person microHoffman    schedule 04.08.2020    source источник
comment
Не могли бы вы сказать, что ожидается? Вы хотите выдавать массивы идентификаторов вместо всего объекта?   -  person Michael D    schedule 04.08.2020
comment
@MichaelD да, я хочу создать массив идентификаторов, а не массив выбранных объектов.   -  person microHoffman    schedule 04.08.2020
comment
Я разместил ответ.   -  person Michael D    schedule 04.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

Параметр bindValue определяет модель, которая будет храниться в переменной, связанной с привязкой ngModel, а не в событии, создаваемом событием add. Таким образом, вы могли бы вместо этого создать связанную переменную ngModel.

Попробуйте следующее

ngOnInit() {
}

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

Также событие add генерируется только при добавлении опций в список, а не каждый раз при изменении этого значения. Для этого вам нужно использовать событие change.

Рабочий пример: Stackblitz

person Michael D    schedule 04.08.2020
comment
большое спасибо, это работает. Я боролся с этим в течение 2 часов, так что действительно спасибо :). - person microHoffman; 04.08.2020
comment
Я также удалил эту часть с selectedValue в onInit и заменил ее функцией compareWith. - person microHoffman; 04.08.2020