重复表单组上的角度切换开关问题答案

【问题标题】：Angular toggle switch issue on duplicated form group重复表单组上的角度切换开关问题
【发布时间】：2019-03-08 12:21:08
【问题描述】：

我有一个表单组，其中包含多个表单控件，包括一个切换开关。切换开关将模型中的布尔值更改为真或假。根据该值，有一个 *ngIf 来处理是否显示表单控件。这一切目前都很好，但是我需要实际上基本上克隆整个表单组，我已经实现了。但是，切换开关仅适用于第一个表单组，其余均无效。实际上，如果我单击其他开关上的开关，它实际上只会打开和关闭第一个开关......我在这里错过了什么？

这是它的外观，我实际上点击了第二个切换开关：

模型有这个值：

advancedOptions: boolean;

模板是这样的：

<div class="advancedOptions">              
        <div class="service-group jbh-toggle">
          Advanced Options:
          <label class="toggleLabel inline-block" for="inbond-freight">Hide</label>
          <input class="jbh-toggle-checkbox ng-untouched ng-valid ng-dirty" #advancedOptions id="handlingUnitAdvancedOptionsToggle" type="checkbox" 
          (change)="handlingUnitAdvancedOptionsToggle(advancedOptions.checked)">              
          <label class="jbh-toggle-label" for="handlingUnitAdvancedOptionsToggle">
          <span class="jbh-toggle-inner" id="span-toggleInner3"></span>
          <span class="jbh-toggle-switch" id="span-toggleSwitch3"></span>
          </label>
          <label class="toggleLabel inline-block" for="handlingUnitAdvancedOptionsToggle">Show</label>
        </div>
      </div>

*ngIf 很简单：

<div *ngIf="advancedOptions"></div>

所有其他控件在复制的表单组中都可以正常工作，除了切换开关。

【问题讨论】：

你真的在复制handlingUnitAdvancedOptionsToggle id吗？
嗯是的...听起来这可能是问题的一部分...但是删除 id 会使整个事情变得更糟
您还为每个变量使用相同的局部变量 (advancedOptions)。根据 handlingUnitAdvancedOptionsToggle() 对该变量所做的操作，这也可能会导致一些问题。
嗯，你能想出一个替代方案吗？只是希望切换隐藏取决于状态的 div
似乎，至少在我看来，如果您说高级选项 1、高级选项 2 和高级选项 3，并且您希望各个控件相互独立地控制它们，那您将为每个组件使用一个组件状态变量。当状态变量被翻转时，*ngIf 为 corresponding Adv 选项激活。但是有很多方法可以解决每个问题。

标签： javascript angular typescript

【解决方案1】：

您可以使用切换开关的 formcontrol 值，例如当它的值为 true 时，您可以如下所示显示/隐藏 form.controls.default_checkbox.value != 1

【讨论】：

这适用于单个切换开关，但我正在克隆切换和表单组