Primeng p-dropdown onchange 用户确认

Question

现在这是我对 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;
    }

问题是屏幕上显示的视图值没有恢复到原始值。

预期结果 -

Dropdown changes from Value A to Value B.
User confirmation - Select "Cancel".
Page should still show the old value i.e Value A.

实际结果-

Dropdown changes from Value A to Value B.
User confirmation - Select "Cancel".
Page should is showing new value B. (without primeng, its showing blank value - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue)

正在添加 GIF -

遇到了这段代码，它在本机 angular 上运行良好，但在使用 *ngFor 动态填充选项时失败 - https://stackblitz.com/edit/angular-dropwdown-confirmation-issue

仅供参考，尝试了各种 github 帖子，但发现其中 none 有用。

Angular 版本 - "@angular/core": "^5.2.0"
PrimeNG - "primeng": "^5.2.4"

Answer 1

实际上您的模型工作正常。您的问题是 selected 下拉列表索引。所以你也需要改变它。 Demo

在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 中也更改事件目标 select 索引

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)
    }
  }

Primeng p-dropdown onchange 用户确认

Primeng p-dropdown onchange with user confirmation

angular

primeng

primeng-dropdowns