Primeng p-dropdown onchange 用户确认
Primeng p-dropdown onchange with user confirmation
现在这是我对 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"
实际上您的模型工作正常。您的问题是 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 下拉菜单的实现 -
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"
实际上您的模型工作正常。您的问题是 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)
}
}