引导拨动开关在桌子上不起作用答案

【问题标题】：bootstrap toggle-switch not working on table引导拨动开关在桌子上不起作用
【发布时间】：2021-07-28 05:15:49
【问题描述】：

我有一个带有拨动开关的表格，我需要根据我在另一列上的状态打开或关闭它们。事情是我无法让它工作，因为除了第一个按钮之外，所有按钮都被禁用，并且无论我处于何种状态，切换始终处于关闭状态。

这是我目前正在尝试的堆栈闪电战：https://stackblitz.com/edit/angular-ivy-aje3j9?file=src/app/app.component.html

【问题讨论】：

【解决方案1】：

移除id="{{item}}"并为id绑定项目

<div class="row">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <table class="table table-striped table-bordered dt-responsive nowrap table-hover">
          <thead>
            <tr>
              <th class="align-middle text-center">Agencia</th>
              <th class="align-middle text-center">Flag</th>
              <th class="align-middle text-center">Estado</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let data of flagEstadoAll; let item = index;" class="btn-off">
              <td class="align-middle text-center">{{data.nombre_comercial}}</td>
              <td class="align-middle text-center">{{data.nombre}}</td>
              <td class="align-middle text-center">
                <div class="custom-control custom-switch">
                  <input type="checkbox" class="custom-control-input" [id]="item">
                  <label class="custom-control-label" [for]="item">{{data.estado_flag == 'Activo' ? 'Desactivar' : 'Activar'}}</label>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

应该可以了

【讨论】：

它有效！非常感谢。另外，另一个问题，我如何将切换绑定到状态？例如，状态为活动，因此开关应打开，如果不活动则应关闭。
使用 [checked]="true" 或 [checked]="false"