Возможно ли в Angular отобразить значение в опции, но вернуть массив в ngModelChange? - PullRequest
Новая
       45

Возможно ли в Angular отобразить значение в опции, но вернуть массив в ngModelChange?

0 голосов
/ 08 апреля 2020

Я пытаюсь организовать выпадающий список, который будет отображать одно значение для пользователя, но также передаст обратно объект массива при изменении выбора.

В настоящее время у меня есть массив с названием классификацией результата, который имеет 3 элементы CLASSIFICATION_NAME, GROUP_ID, GROUP_NAME.

Когда пользователь выбирает конкретное CLASSIFICATION_NAME, я хочу вернуть весь результат массива, содержащий все 3 элемента, перечисленных выше.

В настоящее время приведенный ниже код работает для всего, КРОМЕ отображение CLASSIFICATION_NAME в раскрывающемся списке при загрузке. Он показывает список после щелчка, но начинается с пустого, пока не будет нажата кнопка. Есть ли способ это исправить? Я полагаю, что элемент display связан с [ngValue], но это также то, что я использую для передачи всего массива, а не только одного.

Любая помощь будет принята с благодарностью. 

<p>Select Classification*</p>
<select  [(ngModel)]="selectedClassification (ngModelChange)="changedClassification($event)">
<option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>

Сводка - я хочу, чтобы в моем раскрывающемся списке всегда отображалось значение, отображаемое пользователю (значение является именем классификации), но когда оно Я хочу, чтобы весь массив передавался в функцию ChangeClassification. Также иногда после того, как пользователь выбирает из других выпадающих на этой странице, они также будут go пустыми, но если они выбраны во второй раз, они будут заполняться.

1 Ответ

0 голосов
/ 08 апреля 2020

Если все работает так, как вы ожидаете , за исключением отображаемого начального значения, мне интересно, нужна ли вам функция [compareWith]. Я не знаю, как выглядит ваша classificationresult модель, но если бы мне пришлось угадывать, то добавление функции [compareWith] к вашему элементу <select> решило бы проблему.

Вот статья , объясняющая это немного больше.

Я сделал этот Stackblitz в качестве примера с использованием функции [compareWith]. В моей демонстрации я использую ReactiveForms, но compareWith должен быть таким же.

Для вашего кода это может выглядеть примерно так: 

<p>Select Classification*</p>
  <!-- add this [compareWith] -->
  <select [compareWith]="myCompareFunc" [(ngModel)]="selectedClassification" (ngModelChange)="changedClassification($event)">
  <option *ngFor="let classificationresult of classificationresults" [ngValue]="classificationresult" >{{ classificationresult.CLASSIFICATION_NAME }}</option>
</select>

В вашем .ts файле: 

export class YourComponent {
  // all your component code.. 

  /* compare function, change the logic to fit your needs */
  myCompareFunc (classificationRes1: any, classificationRes2: any): boolean {
    return classificationRes1 && classificationRes2 
      ? classificationRes1.CLASSIFICATION_NAME === classificationRes2.CLASSIFICATION_NAME
      : classificationRes1 === classificationRes2
  }
}

Если это не так Чтобы решить эту проблему, вам может потребоваться опубликовать больше кода и моделей данных .ts .

...