Question

我想在Angular 2中自动选中或取消选中复选框。当值为1时，复选框将检查并且此复选框为0，复选框将自动取消选中。

public LightControl() {
    this.dataLight = this._LightService.AutoLightController(this._ConnectService.SocketInstanse())
        .subscribe(data => {
            this.temp = JSON.stringify(data['status']);
        })
}

HTML：

 <div class="togglebutton">
    <label> <input type="checkbox" [checked]="temp(change)="temp">Light</label>
 </div>

当temp值为true时，检查，但是当temp为false时，它不会自动取消选中。

Answer 1

使用输入字段的checked属性。将布尔变量绑定到输入复选框的checked属性。使用可观察的概念，并订阅数据变量，该变量将触发输入字段的复选框可见性。的 [检查] =“yourModel.isChecked ” 在subscribe方法中，将当前状态分配给yourModel的isChecked属性。并且根据此属性的当前值，将选中或取消选中复选框。

observableVariable。订阅（data =＆gt; { 处理数据或根据处理的数据，将状态分配给

yourModel.isChecked = status

}）;

Answer 2

修改

首先创建一个SharedModule：

import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {RouterModule} from '@angular/router'; @NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule, RouterModule ], exports: [ CommonModule, FormsModule, ReactiveFormsModule, RouterModule ], declarations: [] }) export class SharedModule {}

然后将此SharedModule导入到需要使用复选框的路径模块中。

现在，您将能够使用角度特定指令，例如ngModel。

<input type="checkbox" [(ngModel)]="isChecked">

在组件中：

this.isChecked = Number(data['status']) === 0 ? false : true;

Answer 3

angular 2复选框值为true，选中复选框：

    <div class="togglebutton">
      <label> <input type="checkbox" [value]="true" [(ngModel)]="temp">Light</label>
    </div>

如果temp是布尔值，则必须使用[value]="true"，当temp为真时，选中复选框，如果temp为false，则不选中复选框，如果使用value="true"， temp是字符串。

Answer 4

尝试一下：

<input type="checkbox" [checked]="temp == 1 ? '' : null">

仅当温度为1时，这将显示选中属性。

通过布尔值检查和取消选中Angular 2中的复选框

4 个答案:

yourModel.isChecked = status