Angular 引导切换复选框不'；在引导转盘中不工作

我在使用引导切换复选框和在旋转木马中编辑复选框时遇到问题

我需要一个带指示器的旋转木马。在此旋转木马中有一个表格，其中包含必须检查的工作流，如您在此处所见：

这个解决方案有两个问题

第一期：
复选框不可编辑。当我移除转盘指示器时，我发现复选框是可编辑的，所以我认为一个可能的问题是，指示器透明地覆盖在复选框上，因此它们不可编辑。我怎样才能解决这个问题？这些指示器是必需的

第二期：
我使用引导切换给我的复选框一个切换样式。但复选框显示为普通复选框。我尝试了一点，如果我遗漏了一些代码，它会工作，但如果我完成了就不行。我认为这可能与CSS有关。我尝试了很多，但我找不到这个问题的原因

有人能帮忙吗

我在打字脚本中使用Angular。我的代码如下所示：

HTML

---

正常引导与Angular不兼容。你应该试试ngx引导

---

使用ngx引导？@SanthoshV否。正常引导使用普通引导（仅包括bootstrap.js），在角度上不起作用。您需要安装包装器库

ngx引导程序
。尝试修改z索引以解决第一个与样式相关的问题。但第二个问题是您想要使用该组件，它肯定需要
ngx引导
@SanthoshV z-index工作！非常感谢。我将尝试ngx引导，并在下周一告诉您它是否有效。我这周的工作就要结束了：-）谢谢。但请注意，Bootstrap与Angular兼容，但不建议使用它，而且它比ngx Bootstrap更难使用。
<div class="container mt-3">
   <div id="carouselPrufung" class="carousel slide" data-ride="carousel" data-interval="false">
    <ol class="carousel-indicators top carousel-indicators-numbers">
       <li data-target="#carouselPrufung" *ngFor="let j of arrAuftrag; let l = index" [attr.data- 
         slide-to]="l" [ngClass]="l == 0 ? 'active' : ''">{{l + 1}}</li>
    </ol>
    <div class="carousel-inner top-index">
      <div *ngFor="let i of arrAuftrag; let k = index" [ngClass]="k == 0 ? 'carousel-item active' : 
         'carousel-item'">
         <table class="table table-sm mt-5">
           <thead>
             <tr>
               <th scope="col">Kontrolle</th>
               <th scope="col">OK</th>
             </tr>
           </thead>
          <tbody>
             <tr *ngFor="let text of fehlertexte">
              <td>{{text.text}}</td>
              <td><input id="g{{getNumber(k + 1)}}id{{getNumber(text.fehlerId)}}" type="checkbox" 
                 checked data-toggle="toggle"></td>
             </tr>
          </tbody>
       </table>
      </div>
     </div>
   </div>
 </div>

    li {
        text-indent: 0;
        margin: 0 2px;
        width: 30px;
        height: 30px;
        border: none;
        border-radius: 100%;
        line-height: 30px;
        background-color: #999;
        color: #fff;
        transition: all 0.25s ease;
        text-align: center;
        &.active, &:hover {
            margin: 0 2px;
            width: 30px;
            height: 30px;
            background-color: #337ab7;        
          }
    }
    z-index: 1;
}
.top-index {
    z-index: 2;
}
.top {
    top: 10px;
    margin:0;
    padding-left:15px;
    padding-right:15px;
}
/* Bootstrap Toggle v2.2.2 corrections for Bootsrtap 4*/
.toggle-off {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.toggle.off {
    border-color: rgba(0, 0, 0, .25);
}

.toggle-handle {
    background-color: white;
    border: thin rgba(0, 0, 0, .25) solid;
}```