Применить p-dropdown onchange с подтверждением пользователя

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

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. (без использования Primeng, отображается пустое значение - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue)

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

введите здесь описание изображения

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

К вашему сведению, пробовал разные сообщения на github, но ни один из них не нашел полезного.

Угловая версия - "@ angular / core": "^ 5.2.0"
PrimeNG - "primeng": "^ 5.2.4"


angular primeng primeng-dropdowns
person SaratBhaswanth    schedule 23.04.2020    source источник
comment
Я могу попробовать ... Но это займет много времени   -  person SaratBhaswanth    schedule 23.04.2020
comment
@Chellappan வ вы можете работать с stackblitz.com/edit/angular-dropwdown-confirmation-issue < / а>   -  person SaratBhaswanth    schedule 24.04.2020
comment
Это также не работает в собственном коде. Таким образом, нет необходимости в реализации Primeng.   -  person SaratBhaswanth    schedule 24.04.2020

Ответы (1)


arrow_upward
1
arrow_downward

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

В 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)
    }
  }
person pc_coder    schedule 24.04.2020
comment
Это потрясающе. Я надеюсь, что то же самое и с Primeng. Попробую .. Спасибо - person SaratBhaswanth; 24.04.2020
comment
Я думаю, что на замену будет только разница - person pc_coder; 24.04.2020
comment
Можете ли вы проверить мою ссылку на stackbitz? Я внес изменения для primeng, но это $ event.target не определено .. - person SaratBhaswanth; 24.04.2020
comment
stackblitz.com/edit/angular-dropwdown-confirmation-issue-p78bsq надеюсь, это поможет тебе - person pc_coder; 24.04.2020
comment
Ааа .. Timeout hack???? - person SaratBhaswanth; 24.04.2020
comment
Да, потому что метка primeng имеет только геттер. Сеттера нет, поэтому мы не можем напрямую изменить его метку. - person pc_coder; 24.04.2020
comment
Спасибо .. Вдали от работы ... Проверю и обновляю - person SaratBhaswanth; 24.04.2020
comment
Да, он работает в соответствии с предоставленной ссылкой stackblitz. Нужно проверить реальную реализацию в моем коде. - person SaratBhaswanth; 27.04.2020