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

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

0 голосов
/ 04 августа 2020

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

Вы знаете, в чем может быть проблема? В консоли ошибок нет. Спасибо за все идеи.

1 Ответ

1 голос
/ 04 августа 2020

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

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

ngOnInit() {
}

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

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

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

...