Question

组件变量：

  editChecked = false;
  editMode = false;
  editMediaMode = false;

我当前的幻灯片切换：

  <mat-slide-toggle
    color="primary"
    [checked]="editChecked"
    (change)="editCard($event)">
    Edit Event
  </mat-slide-toggle>

editCard（）：

editCard(ev) {
  if (ev.checked === false) {
    this.editMode = false;
    this.editMediaMode = false;
  } else if (ev.checked === true) {
    this.editMode = true;
    this.editMediaMode = true;
  }
  console.log(this.editMode);
}

当我在表单上成功提交此切换开启时，我试图将切换开关恢复为默认的灰色外观。但是，即使我将editMode设置为false，尽管editMode为false，切换仍然会“激活”。我甚至尝试将editChecked值设置为false，当成功提交但仍然遇到同样的问题时。

非常感谢任何帮助。

Answer 1

解决方案涉及将editChecked添加到editCard（）

 editCard(ev) {
  if (ev.checked === false) {
    this.editMode = false;
    this.editMediaMode = false;
    this.editChecked = false;
  } else if (ev.checked === true) {
    this.editMode = true;
    this.editMediaMode = true;
    this.editChecked =  true;
  }
  console.log(this.editMode, this.editMediaMode, this.editChecked);
}

然后在提交成功时将editMode，editMediaMode和editChecked设为false。

感谢@marko和@ Jota.Toledo的帮助。

角度材料滑动切换重置

1 个答案: