如何在 html 滑动切换中显示在活动 = 1 时选中而在活动 = 0 时不选中? [英] how to show in html slide-toggle checked when acitve = 1 and not checked when active=0?
问题描述
我的 mat-slide-toggle 有问题.在网络中,我所有的滑动切换都像在 .image
我认为所有的东西都很好,但在 html 显示中所有检查.请问,你能给我建议任何解决方案吗?我尝试使用,就像在这个
在控制台中看起来不错,但在 html 中不显示,active = 1 已选中,active = 0 未选中.请知道如何实施?
更新代码:
<td><form [formGroup]="activeHomeboxPForm" class="col s12"><section class="example-section"><mat-slide-toggle formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'">{{item.active}}</mat-slide-toggle></节></表单></td>显示这个:
解决方案 您的 html 将所有滑块显示为选中状态,因为您为它们提供了相同的 formControlName
改成
编辑
您还可以为所有滑块使用一个独特的表单组
let 控件 = {'homeboxpackage_id': new FormControl('', Validators.required)};for(let i = 0;i < this.homeboxsp.length;i++){控件['active-'+i] = new FormControl(this.homeboxsp[i].active =='1', Validators.required)}this.myform = new FormGroup(controls);
https://stackblitz.com/edit/angular-afrebm?file=app%2Fapp.component.ts
I have a problem with my mat-slide-toggle. In web all my slide-toggle are checked like in .image
I think that all of things are good, but in html display all checked. Please, can you suggest me any solution? I try to use, like in this post but nothing work for me.
My code:
ts code:
this.activeHomeboxPForm = new FormGroup({
'active': new FormControl(true, Validators.required),
'homeboxpackage_id': new FormControl('', Validators.required)
});
populateFormHomeboxP() {
this.ws.homeboxPGetAll().subscribe(
homeboxsp => {
this.homeboxsp = homeboxsp.map((homeboxspp) => {
this.activeHomeboxPForm.controls['active'].setValue(homeboxspp.active),
this.activeHomeboxPForm.controls['homeboxpackage_id'].setValue(homeboxspp.homeboxpackage_id)
console.log(homeboxspp)
console.log(homeboxspp.active)
console.log(homeboxspp.homeboxpackage_id)
return new HomeboxP(homeboxspp);
});
}
)
}
html code:
<tbody>
<tr *ngFor="let item of homeboxsp; let i=index">
<td>
<form [formGroup]="activeHomeboxPForm" class="col s12">
<section class="example-section">
<mat-slide-toggle formControlName="active" class="example-margin" [checked]="item.active === '1'"> {{item.active}}
</mat-slide-toggle>
</section>
</form>
</td>
</tr>
</tbody>
in console looks good, but in html doesn't display, active = 1 checked and active = 0 no checked. Please any idea how to implement?
Update code:
<tr *ngFor="let item of homeboxsp; let i=index">
<td>
<form [formGroup]="activeHomeboxPForm" class="col s12">
<section class="example-section">
<mat-slide-toggle formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"> {{item.active}}
</mat-slide-toggle>
</section>
</form>
</td>
show this:
解决方案 Your html displays all sliders as checked because you gave them all the same formControlName
Change it to
<form [formGroup]="activeHomeboxPForm" class="col s12">
<tr *ngFor="let item of homeboxsp; let i=index">
<td>
<section class="example-section">
<mat-slide-toggle formControlName="active-{{i}}" class="example-margin" [checked]="item.active === '1'"> {{item.active}}
</mat-slide-toggle>
</section>
</form>
</td>
Edit
You can also use one unique form group for all your sliders
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);
https://stackblitz.com/edit/angular-afrebm?file=app%2Fapp.component.ts
这篇关于如何在 html 滑动切换中显示在活动 = 1 时选中而在活动 = 0 时不选中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆