mat-slide-toggle 显示数据。角 5答案

【问题标题】：mat-slide-toggle display data. Angular 5mat-slide-toggle 显示数据。角 5
【发布时间】：2018-08-08 15:36:47
【问题描述】：

我编写了一段代码，用于在 html 中显示数据。我想在 mat-slide-toggle 中显示数据。一切看起来都很好，我的 mat-slide-toggle 工作得很好，当值为 1 时在 html 中不显示检查或值为 0 时不检查。你能给我建议吗？

我的html代码：

   <form [formGroup]="productform" class="col s12" materialize>
                <mat-slide-toggle formControlName="active" id="device" (change)="onChange($event)" [(ngModel)]="devicee[i]" (click)="onproduct()">
                </mat-slide-toggle>
                {{device}}
              </form>

还有我的 ts 代码：

   this.productform= this.fb.group({
      'active': new FormControl('', Validators.required),

    });
   populateFormProduct() {
        this.productform.setValue({
          active: this.device
        })
        console.log(this.device)
      }



  onChange(value) {

    if (value.isChecked === true) {
      this.device = 1; 
    } else  {
      this.device = 0;
    }

  }

我想设置active: this.device，因为我想在html中选择这个值。

感谢您的帮助。有任何问题请写信给我。

【问题讨论】：

标签： angular forms typescript angular-material angular-material2

【解决方案1】：

当我使用这个 html 代码时：

  <mat-slide-toggle  formControlName="active" (change)="onChange($event)" (click)="onproduct()"></mat-slide-toggle> {{device}}

结果如照片所示：

始终检查设备。在这部分中，我只想在状态为 1 时显示检查，而不是在状态为 0 时显示检查。

当我使用这个 html 代码时

<button formControlName="active" (click)="onChange($event) ; onproduct()"></button>

照片中的结果

【讨论】：