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动态绑定该类

<Label TextColor={Binding StaticResource AppColor}/>

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

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

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

1 个答案: