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

Question

我有一个表单组，其中有几个表单控件，包括一个切换开关。切换开关可将模型中的布尔值更改为true或false。根据值的不同，会有一个*ngIf来处理是否显示表单控件。这一切目前都很好，但我有一个要求，实际上克隆整个表单组，我已经实现了。但是，切换开关仅适用于第一个窗体组，其余窗体组均不起作用。实际上，如果我点击其他的开关，它实际上只会切换到第一个开关，然后off...what if off...what here？

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

​

该模型具有以下值：

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>

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

Answer 1

你可以使用切换开关的表单控制值，当它的值为真时，你就可以像下面的form.controls.default_checkbox.value != 1那样显示/隐藏