我有这个简单的HTML选择来实现Angular2(TS)中的下拉列表,如下所示
<select id="pageSize" (change)="onPageSizeChanged($event, pagination.pageSize)">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
先前选择的值保存在pagination.pageSize
变量中。在改变这一点时,我想打开一个对话框并等待用户响应。如果是用户,单击取消我想将选择还原为先前选择的选项。
onPageSizeChanged(event, oldValue) {
const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
if (response) {
//... some code ...
} else {
//... here I want to revert the selection to previously selected option
}
}
尝试了很多不同的东西,但没有运气。
请帮助,我对这个简单的事情失去了理智。我一定是在做一些愚蠢的事。
尝试#1 - 没有工作(Plunk - https://embed.plnkr.co/ILi12O/)
<select id="pageSize" [ngModel]="pageSize" (ngModelChange)="onPageSizeChanged($event, pagination.pageSize)">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
onPageSizeChanged(event, oldValue) {
const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
if (response) { //go ahead so something }
else { this.pageSize = oldValue; }
}
请尝试以下方法。添加ngModelChange方法以跟踪模型更改。如果对话框确认并保留下一次更改的值,则保持更改,否则设置值。本地模板变量(#select)更容易跟踪。我根据您的plunker进行了更改:
HTML:
<select #select id="pageSize" [ngModel]="pageSize" (ngModelChange)="select.value = onPageSizeChanged($event)">
打字稿:
onPageSizeChanged(event) {
const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
console.log(this.pagination.pageSize)
if (response) {
this.pageSize = event;
this.pagination.pageSize = event;
}
else{
this.pageSize = this.pagination.pageSize;
}
return this.pagination.pageSize;
}
https://plnkr.co/edit/RR8XgZW2KIcYTnxo7Iju?p=preview
您可以在component.html文件中执行类似的操作...
在select元素上添加template reference variable #pageSize
在(更改)上,设置该变量的值(pageSize.value)等于我们接下来要创建的onChangeSize方法。将pageSize.value传递给此onChangeSize方法,如下所示:(change)=“pageSize.value = onChangeSize(pageSize.value)
这给了我们......
<select id="pageSize" #pageSize
(change)="pageSize.value = onChangeSize(pageSize.value)">
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
并在您的component.ts文件中,创建一个获取该值的方法,如果用户确认更改,我们只需返回该值。如果用户拒绝更改,我们将返回默认值。
export class MathComponent implements OnInit {
defaultInput: number = 10;
userInput: number = this.defaultInput;
constructor() { }
ngOnInit() {
}
onChangeSize(pageSize: HTMLSelectElement) {
const response = window.confirm("Are you sure you want change the page size? Your edits will be lost?");
if (response) {
return pageSize;
} else {
return this.defaultInput;
}
}
}
对于其(ngModelChange)
方法包含异步代码(async / await,Promise,rxjs Observable)的Select控件,前Angular 6代码可以使用以下解决方案。
<select
id="{{ user.emailAddress }}"
class="form-control role-select"
aria-label="Dropdown"
[disabled]="busy"
[(ngModel)]="user.role"
(ngModelChange)="editUserRole(user)"
>
<option *ngFor="let role of (roles | async)" [value]="role">
{{ role }}
</option>
</select>
在控制器中
public async editUserRole(user: IUser) {
if (user.role === SubscriptionUserRole.DATA_DEFAULT && !this._hasAtLeastOneOtherAdmin(user)) {
// Execute on the next app.tick cycle. Pre V6, the HTML Element value is not updated until after ngModelChange.
// This may not be needed in Angular V6.
// zone.js and ngZone intercept async operations to trigger UI updates. Hence, no need to call app.tick.
setTimeout(() => {
user.role = SubscriptionUserRole.DATA_ADMIN;
}, 0);
this.errorMessage = 'At least one user should be DataAdmin';
return;
}
// Continue change operation like database update here.
}
我想在某些情况下,延迟更新可能会造成问题。
由于在ngModelChangeCall之前更新FormControl的更改,Angular 6+中可能不需要此延迟。