Angular Custom-Control-Input在循环内与formControlName一起无法正常工作

问题描述

我想在角度上应用自定义主题样式，但复选框无法正常工作。

我拥有这部分代码，并且运行良好：

<tr *ngFor="let item of lists let i=index" [formGroupName]="i">
    <td>
        <div class="form-group">
            <div class="custom-control custom-switch">
                <input type="checkBox" class="form-control" id="field_check"  formControlName="checked">
                <label class="form-control-label"  for="field_check">check</label>
            </div>
        </div>
    </td>
</tr>

但是当我尝试添加自定义类控件不起作用时：

<tr *ngFor="let item of lists let i=index" [formGroupName]="i">
    <td>
        <div class="form-group">
            <div class="custom-control custom-switch">
                <input type="checkBox" class="custom-control-input" id="field_check" formControlName="checked">
                <label class="custom-control-label"  for="field_check">check</label>
            </div>
        </div>
    </td>
</tr>

如何在不丢失class="custom-control-input"的情况下应用我的class="form-control"？我已经尝试过这个class="form-control custom-control-input"，但是没有用

更新

在检查元素之后，我发现了这个：

所以这是我得到的结果：

我无权访问CSS代码custom-control-input，form-control how我可以解决此问题吗？

解决方法

它应该理想地工作，最好是使用inspect元素查看哪种样式应用于控件。可能是表单控制类覆盖了它。您可能需要使用！在课堂上很重要。