如何使开关切换仅当我在确认框中单击确定时才更改?当我在确认框中单击“取消”时,我不想更改任何内容。
我的代码html:
<mat-card class="result">
<mat-card-content>
<h2 class="example-h2">Result</h2>
<section class="example-section">
<mat-slide-toggle
class="example-margin"
[color]="color"
[checked]="checked"
[disabled]="disabled"
(click)="myfunction()">
Slide me!
</mat-slide-toggle>
</section>
</mat-card-content>
</mat-card>
代码ts:
export class SlideToggleConfigurableExample {
color = 'accent';
checked = false;
disabled = false;
myfunction() {
if (confirm('Are you sure to change Status?')) {
}
}
}
我试过了,这段代码
<mat-slide-toggle
class="example-margin"
[color]="color"
[checked]="checked"
[disabled]="disabled"
(click)="myfunction()"
onclick="return confirm('Are you sure?')">
Slide me!
</mat-slide-toggle>
并从ts中删除if (confirm('Are you sure to change Status?')) {}
。
在这里,我有这样的结果:当我单击ok
和cancel时,我的函数就会执行。
请告诉我,怎么做,只有当我点击确认ok
时才能进行切换。
谢谢
更新:
Html代码:
<form [formGroup]="myform" class="col s12">
<div *ngFor="let item of homeboxsp;let i = index">
<section class="example-section">
<mat-slide-toggle value="active" formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"(click)="onActiveHomeboxP()"> {{item.active}}
</mat-slide-toggle>
</section>
</div>
</form>
ts代码:
export class AppComponent {
public homeboxsp: HomeboxP[] = [];
myform: FormGroup;
checkedBtn: boolean;
constructor(public service: Service) {
}
ngOnInit() {
this.populateFormHomeboxP();
}
populateFormHomeboxP() {
this.homeboxsp = this.service.getData();
let controls = {
'homeboxpackage_id': new FormControl('', Validators.required)
};
for (let i = 0; i < this.homeboxsp.length; i++) {
controls['active-' + i] = new FormControl(this.homeboxsp[i].active == '1', Validators.required)
}
this.myform = new FormGroup(controls);
this.patchForm();
}
patchForm() {
this.myform.patchValue({
homeboxpackage_id: this.homeboxsp.map(x => x.homeboxpackage_id),
});
console.log(this.homeboxsp.map(x => x.active))
console.log(this.homeboxsp.map(x => x.homeboxpackage_id))
}
onActiveHomeboxP() {
if (confirm('Are you sure?')) {
let edigps = this.myform.value
console.log(edigps)
console.log('true')
} else {
this.checkedBtn = !this.checkedBtn;
}
}
}
图片:
选中
consele.log('ture')
,show true更新:当我在html中添加(ngModel)]="checkedBtn"
时,开关会更改所有开关,而不仅仅是一个开关。
发布于 2018-05-15 04:23:00
仅当您按下OK时,以下命令才会更改开关
在HTML中:
<mat-slide-toggle [(ngModel)]="checkedBtn"
(click)= "myfunction()"></mat-slide-toggle>
在TS中:
myfunction() {
if (confirm('Are you sure?')) {
console.log('true')
}else{
this.checkedBtn= !this.checkedBtn;
}
}
https://stackoverflow.com/questions/50334219
复制相似问题