角材料幻灯片切换重置答案

【问题标题】：Angular Material Slide Toggle Reset角材料幻灯片切换重置
【发布时间】：2018-01-17 20:56:30
【问题描述】：

组件的变量：

  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，但仍然遇到同样的问题。

任何帮助将不胜感激。

【问题讨论】：

editMode 与mat-slide-toggle 有什么关系？在模板上，您似乎没有将其绑定到任何地方。组件的[checked] 输入被绑定到editChecked 变量，但您不会在提供的代码中对其进行操作...
抱歉，我已经更新了帖子。
这就是问题所在。就在我头上。感谢您指出。

标签： angular angular-material

【解决方案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 的帮助。

【讨论】：