仅当结果为真时，如何使我的 mat-slide-toggle 更改？答案

【问题标题】：How to make my mat-slide-toggle change only when a result is true?仅当结果为真时，如何使我的 mat-slide-toggle 更改？
【发布时间】：2018-09-21 22:32:32
【问题描述】：

我有激活或不激活mat-slide-toggle 的函数。我想改变这个功能，只有当我的结果是假的。但是，我的开关一直在变化，无论结果是真还是假。我希望结果为假时开关不会改变。

组件 ts

onActiveHomeboxP(homeboxpackageid, activeid, elem) {
    this.areWeWaiting = true;
    if (confirm('Are you sure to change Status?')) {
      let editHomeboxp = new HomeboxP(
        this.activeHomeboxPForm.value
      );
      editHomeboxp.homeboxpackage_id = homeboxpackageid;
      editHomeboxp.active = !activeid ? 1 : 0;
      this.ws.activatehomeboxp(editHomeboxp).subscribe(
        result => {
          if (result === true) {
            this.router.navigate(['/hbp']);
          } else {
            this.areWeWaiting = false;
          }
        },
        error => {
        }
      );
    } else {
      elem.checked = !elem.checked;
    }
  }

组件html

<form [formGroup]="activeHomeboxPForm" class="col s12" >
        <span *ngIf="item.active === 1" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 1" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)" >
              </mat-slide-toggle>
          </section>
        </span>
         <span *ngIf="item.active === 0" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 0" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)">
               </mat-slide-toggle>
          </section>
        </span> 
   </form>

拜托，你能问我任何想法，当结果为假时，如何使开关不改变。谢谢

【问题讨论】：

对不起，我不明白。你说的result是哪个值？是item.active吗？
result => { if (result === true) { this.router.navigate(['/hbp']); } else { this.areWeWaiting = false; } } 在此。当我在 ws 中发帖时，ws 对我的回应是真还是假。当结果为真时，幻灯片更改正确。当结果为假时，我不想更改幻灯片
如果值为false，您想禁用按钮是什么意思？
或者，当我切换幻灯片时，我得到结果为假，在结果为假的那一刻，幻灯片进入初始状态。
所以如果按钮错了，你想禁用它吗？

标签： angular typescript angular-material

【解决方案1】：

html 文件：

<mat-slide-toggle [checked]="yourFlag">Slide me!</mat-slide-toggle>

ts 文件：

func(){
     this.yourFlag = true;
}

如果 YourFlag 为 true，则切换将打开，反之亦然。

【讨论】：