angular - 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;
    }

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

预期结果 -

下拉列表从值 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 版本 - “@angular/core”：“^5.2.0”
PrimeNG - “primeng”：“^5.2.4”

Answer 1

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

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