Question

我的mat-slide-toggle出了问题。在网络中，所有我的幻灯片切换都会像.image

一样进行检查

我认为所有的东西都很好，但在html显示中都经过检查。拜托，您能告诉我任何解决方案吗？我尝试使用，就像在post中一样，但对我来说没什么用。我的代码：

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 checked，active = 0 no checked。请知道如何实施？

更新代码：

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

显示：

Answer 1

您的html会将所有滑块显示为已选中，因为您为它们提供了相同的INFO: JaCoCoSensor: JaCoCo report not found : path\target\jacoco.exec INFO: JaCoCoSensor: JaCoCo IT report not found: path\target\jacoco-it.exec

将其更改为

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>

https://stackblitz.com/edit/angular-afrebm?file=app%2Fapp.component.ts

Answer 2

我不确定它是否有意，但Angular Material Slide toggle dosn与formcontrols配合得很好。这是一个解决方法：

<强>打字稿：

    this.myform = new FormGroup({
      active: new FormControl(true, Validators.required),
      homeboxpackage_id: new FormControl('', Validators.required),
      inactive: new FormControl(false, Validators.required),
    });
  }

<强> HTML

...
   formControlName="{{item.active ? 'active' : 'inactive'}}" class="example-margin"> {{item.active}}
...

<强> DEMO

当acitve = 1时如何在html幻灯片切换中显示，而当active = 0时未检查？

2 个答案: