如何显示在html幻灯片切换中，当acitve = 1时选中，而在active = 0时未选中? [英] how to show in html slide-toggle checked when acitve = 1 and not checked when active=0?

问题描述

我在使用mat-slide-toggle时遇到问题.在网络中，所有我的幻灯片切换都像.image

I have a problem with my mat-slide-toggle. In web all my slide-toggle are checked like in .image

我认为所有事情都很好，但是在html中显示所有已选中的内容.拜托，你能建议我任何解决方案吗?我尝试在此帖子但对我没有任何帮助. 我的代码:

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代码:

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代码:

  <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>

看起来不错，但是在html中没有显示，active = 1已选中，active = 0未选中.请知道如何实施吗?

in console looks good, but in html doesn't display, active = 1 checked and active = 0 no checked. Please any idea how to implement?

更新代码:

<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>

显示此:

推荐答案

您的html将所有滑块显示为选中状态，因为您为它们赋予了相同的formControlName

Your html displays all sliders as checked because you gave them all the same formControlName

将其更改为

    <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>

修改

您还可以为所有滑块使用一个唯一的表单组

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幻灯片切换中，当acitve = 1时选中，而在active = 0时未选中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！