typescript 如何将 mat-slide-toggle 用于后值 1 或 0

How to use mat-slide-toggle for post value 1 or 0

提问by A. Bin

I'm use mat-slide-toggle form material like this example https://material.angular.io/components/slide-toggle/overview

我正在使用 mat-slide-toggle 表单材料，例如这个示例https://material.angular.io/components/slide-toggle/overview

My problem in this example is like ine this link:

我在这个例子中的问题就像这个链接：

https://stackblitz.com/edit/angular-zafcmh-rvgjhs?file=app%2Fslide-toggle-configurable-example.ts

https://stackblitz.com/edit/angular-zafcmh-rvgjhs?file=app%2Fslide-toggle-configurable-example.ts

When I click ony one switch, I want the click to get just one switch, not all.

当我点击任何一个开关时，我希望点击只得到一个开关，而不是全部。

Can you suggest any solution please?

你能提出任何解决方案吗？

My code html:

我的代码html：

 <form [formGroup]="activeHomeboxPForm">
                <mat-slide-toggle formControlName="active"
                 id="active" 
                 [(ngModel)]="device" 
                 (change)="onChange($event)"
                 (click)="onActiveHomeboxP(item.homeboxpackage_id)">
                </mat-slide-toggle>
                {{device}}
              </form>

My ts code:

我的 ts 代码：

    this.activeHomeboxPForm = this.fb.group({
          'active': new FormControl('', Validators.required),
          'homeboxpackage_id': new FormControl('', Validators.required)
        });
     populateFormHomeboxP() {
        this.activatedRoute.params.subscribe(
          params => {
            this.hsP.getHomeboxPById(params['id']).subscribe(
              homeboxP => {
                this.homeboxP = homeboxP;
                this.activeHomeboxPForm.controls['active'].setValue(homeboxP.active);
                this.activeHomeboxPForm.controls['homeboxpackage_id'].setValue(homeboxP.homeboxpackage_id);
              }
            );
          }
        );
      }

      onActiveHomeboxP(homeboxpackageid) {
        this.loading = true;
        if (confirm('Are you sure to change Status?')) {

      let editHomeboxp = new HomeboxP(
        this.activeHomeboxPForm.value
      );
      editHomeboxp.homeboxpackage_id = homeboxpackageid;
      console.log(editHomeboxp)
      this.hsP.activatehomeboxp(editHomeboxp).subscribe(
        result => {
          if (result === true) {
            Materialize.toast('HomeboxPacket updated successfully', 4000);

          } else {
            this.loading = false;
          }
        },

        error => {
          this.loading = false;
        }
      );
    }
  }
  onChange(value) {
    if (value.checked === true) {
      this.device = 1;
      console.log(1);
    } else {
      this.device = 0;
      console.log(0);
    }
  }

Thank you

谢谢

回答by Nikola Gavric

You need to add device: any = []to your controller and instead of binding the value to device, bind a value to device[i].

您需要添加device: any = []到您的控制器，而不是将值device绑定到，而是将值绑定到device[i]。

Here is the working example

这是工作示例