Невозможно установить значение выбранного элемента с помощью ngModel в angular7 ng-select - PullRequest
Новая
       62

Невозможно установить значение выбранного элемента с помощью ngModel в angular7 ng-select

1 голос
/ 14 мая 2019

Я использую библиотеку angular7 ng-select для реализации элемента управления select. Я использую Angular CLI для разработки. Я пытаюсь предотвратить распространение события, когда происходит событие изменения. Я обнаружил, что в этом случае нельзя предотвратить распространение события изменения. Обходным путем было бы установить выбранное значение программно.

Итак, в моем элементе управления ng-select установлено свойство [(ngModel)] = "selectedOption". В моем файле машинописи в функции, вызванной событием изменения, я установил ранее выбранное значение, чтобы предотвратить любые изменения в выбранной опции. Но это значение не отражается в элементе управления ng-select. Я также попытался обнаружить изменения, используя ChangeDetectorRef.

ng-select HTML: 

 <ng-select [items]="selectOptions" bindValue="value"
    [(ngModel)]="selectedOption" (change)="onChangeOption($event)">
    <ng-template ng-label-tmp let-item="item">
    <img [src]="item.iconOption" /> {{ item.text }}
    </ng-template>
    <ng-template ng-option-tmp let-item="item">
    <img [src]="item.iconOption" class="pr-3" />{{ item.text }}
    </ng-template>
</ng-select>

Полный код файла TS: 

export class SampleComponent implements OnInit, OnChanges {

  @Input() reportStatus: string;
  selectOptions: any[];
  selectedOption: string;
  previousSelectedOption: string;

  constructor() {}

  ngOnInit() {
    this.selectedOption = this.reportStatus;
    this.previousSelectedOption = this.reportStatus;
    this.selectOptions = [
      {
        id: '1',
        value: 'draft',
        iconOption: '../../../assets/images/Draft.svg',
        text: 'Draft'
      },
      {
        id: '2',
        value: 'approved',
        iconOption: '../../../assets/images/Approved.svg',
        text: 'Approved'
      },
      {
        id: '3',
        value: 'completed',
        iconOption: '../../../assets/images/Completed.svg',
        text: 'Completed'
      },
      {
        id: '4',
        value: 'cancelled',
        iconOption: '../../../assets/images/Cancelled.svg',
        text: 'Cancelled'
      }
    ];
  }

  onChangeOption(event) {
    // cannot change status if current status is completed
    // reset to previous selected value
    if (this.previousSelectedOption === 'completed') {
      this.selectedOption = this.previousSelectedOption;
      return;
    }
    this.previousSelectedOption = event.value;
  }
}

Я ожидаю, что выбранное значение в элементе управления ng-select будет сброшено к предыдущему значению. Но новое измененное значение устанавливается независимо.

Я попробовал принятое решение отсюда: установить выбранное значение в angular5 ng-select программно

Но я хочу знать, есть ли более простой подход к этому. Кроме того, у меня есть несколько элементов управления ng-select на моей странице, поэтому использование ViewChild будет проблематичным.

1 Ответ

0 голосов
/ 15 мая 2019 
  onChangeOption(event) {
    setTimeout(() => {
      if (this.previousSelectedOption === 'completed') {
        this.selectedOption = this.previousSelectedOption;
        return;
      }
    });
    this.previousSelectedOption = event.value;
  }

Вы можете достичь ожидаемого поведения, добавив таймаут.

Причина, по которой не обновляется выбранное значение после изменения ngmodel, заключается в том, что во время onChange оно уже обновляет ngmodel с выбранным значением, и после его сброса оно не будет отображаться в пользовательском интерфейсе, поскольку это произошло в том же изменении. цикл обнаружения.

Используя setTimeOut, он увидит новые изменения, внесенные в ngmodel, и применит их в следующем цикле обнаружения изменений.

...