Bootstrap 4 - 使用复选框在明暗模式之间切换

Question

我正在尝试将复选框的布尔值连接到表的类。

所以，如果选中复选框 => 启用暗模式。

我尝试了以下方法：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped" [ngClass]="{'table-dark': darkMode == 'true'}">
  <thead class="thead-light">
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" [checked]="darkMode" ([ngModel])="darkMode=(darkMode ? false : true)" id="customSwitch">
  <label class="custom-control-label" for="customSwitch">Toggle Dark Mode</label>
</div>

如何将复选框中的布尔值绑定到内联角度变量并应用 css 类？

Answer 1

使用 ngModel 指令然后将模板 ref 放入输入中并分配给 ngModel 指令并使用该模板 ref 动态绑定类

<table class="table table-striped" [ngClass]="{'table-dark': ref.value == true}">
  <thead class="thead-light">
    <tr>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" #ref="ngModel" ngModel id="customSwitch" name="chec">  
  <label class="custom-control-label" for="customSwitch">Toggle Dark Mode</label>
</div>

https://stackblitz.com/edit/angular-nkthpk

有关 Angular 表单的更多信息：https://angular.io/guide/forms