Bootstrap 切换复选框在 Bootstrap 轮播中不起作用

Question

我在使用引导切换复选框和在轮播中编辑复选框时遇到问题。

我需要一个带有指标的轮播。在这个轮播中有一个表格，其中包含必须检查的工作流程，您可以在此处看到：

这个解决方案有两个问题。

第一期：
复选框不可编辑。我发现当我删除轮播指示器时复选框是可编辑的，所以我认为一个可能的问题是指示器透明地覆盖在复选框上，因此它们不可编辑。我该如何解决这个问题？指标是必要的。

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

有人可以帮忙吗？

我将 Angular 与 Typescript 一起使用。我的代码如下所示：

HTML

<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>

CSS

    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;
}```

Answer 1

普通引导程序与 Angular 不兼容。你应该试试 ngx-bootstrap

ngx-bootstrap download link