Primeng p-выпадающий onchange с подтверждением пользователя - PullRequest
Новая
       55

Primeng p-выпадающий onchange с подтверждением пользователя

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

Прямо сейчас это моя реализация для раскрывающегося списка:

cust.component. html - 

<p-dropdown #dd1 [options]="custList" [ngModel]="selectedCust" placeholder="Select Account Id"
              [style]="{'width':'200px'}" name="selectDropDown" optionLabel="userName"
              (onChange)="dd1.value = changeCust($event.value)"></p-dropdown>

cust.component.ts - 

private currentVal:Customer;
..
..
changeDEA(cust: Customer) {
    var cfg = confirm("This action will stop the file upload. Do you still want to continue? ");
    if(cfg){
      this.currentVal = cust;
      // Proceed with normal change event
    }else{
      console.log("user cancelled skip..");
      this.selectedCust = this.currentVal;
      // Should revert back to original value
      return this.selectedCust;
    }

Проблема в том, что отображаемое на экране значение не возвращается к исходному значению.

Ожидаемый результат -

Раскрывающийся список изменяется со значения A на значение B. Подтверждение пользователя - выберите «Отмена». На странице все еще должно отображаться старое значение, т.е. значение A.

Фактический результат -

Раскрывающийся список изменяется со значения A на значение B. Подтверждение пользователя - выберите «Отмена». Страница должна отображать новое значение B. (без начального значения, пустое значение - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue)

Добавление GIF -

enter image description here

Наткнулся на этот код, который отлично работает с собственным angular, но не работает, если параметры заполняются динамически с * ngFor - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue

FYI, пробовал разные посты на github, но ни один из них не оказался полезным.

Angular Версия - "@ angular / core": "^ 5.2.0" PrimeNG - "primeng": "^ 5.2.4"

1 Ответ

1 голос
/ 24 апреля 2020

На самом деле ваша модель работает правильно. У вашей проблемы выбран индекс выпадающего списка. Так что вам также нужно изменить это. Демонстрация

В html использовать (изменить) событие 

<select #dd1 id="pageSize" [(ngModel)]="myValue" (change)="onChange($event)"  

  placeholder="Select Account Id"> 
              <option *ngFor="let d of custList" [ngValue]="d.userName" >{{d.userName}}</option>
  </select>

в файле component.ts изменить целевой объект указатель выбора тоже 

onChange(event) {
    const response = window.confirm("Are you sure to want change the value?");
    if (response) {

      this.oldValue = this.myValue;
    }
    else {
      this.myValue = this.oldValue;
      event.target.selectedIndex=this.custList.findIndex(x=>x.userName==this.oldValue)
    }
  }
...