我有这个简单的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; }
}
答案 0 :(得分:2)
https://plnkr.co/edit/RR8XgZW2KIcYTnxo7Iju?p=preview
您可以在component.html文件中执行类似的操作...
在您的选择元素上添加template reference variable #pageSize
和on(change),设置该变量的值(pageSize.value)等于我们接下来要创建的onChangeSize方法。将pageSize.value传递给此onChangeSize方法,如下所示:(change)=&#34; 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;
}
}
}
答案 1 :(得分:1)
尝试以下方法。添加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;
}
答案 2 :(得分:0)
对于(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+中可能不需要此延迟。