如何进行切换，只有当我点击确认`确定`时才能更改
如何进行切换，只有当我点击确认`确定`时才能更改
提问于 2018-05-14 23:41:51
如何使开关切换仅当我在确认框中单击确定时才更改？当我在确认框中单击“取消”时，我不想更改任何内容。
我的代码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;
}
}
}图片：
选中
- 是因为status is 1
- checked when I click Ok in
consele.log('ture')，show true
更新：当我在html中添加(ngModel)]="checkedBtn"时，开关会更改所有开关，而不仅仅是一个开关。
回答 1
Stack Overflow用户
发布于 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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50334219
复制相关文章
相似问题