自举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指令和使用该模板裁判类动态绑定

<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

有关角形式的更多信息：https://angular.io/guide/forms