web-dev-qa-db-ja.com

Angular 2 in boolean value）のチェックされたチェックボックスとチェックされていないチェックボックス

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の場合は自動的にオフになりませんでした。
angulartypescriptcheckboxangular2-directives
4
ryan

入力フィールドのチェックされたプロパティを使用します。ブール変数を入力チェックボックスのcheckedプロパティにバインドします。監視可能な概念を使用し、入力フィールドのチェックボックスの可視性をトリガーするデータ変数をサブスクライブします。 [checked] = ‘yourModel.isChecked’ subscribeメソッドで、現在のステータスをyourModelのこのisCheckedプロパティに割り当てます。このプロパティの現在の値に基づいて、チェックボックスがオンまたはオフになります。

observableVariable .subscribe（data => {プロセスデータまたは処理されたデータに従って、ステータスを

yourModel.isChecked = status

}）;

2
Abhishek Kumar

編集：

最初に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を、チェックボックスを使用する必要があるルートのモジュールにインポートします。

これで、angular ngModelなどの特定のディレクティブを使用できるようになります。

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

コンポーネント内：

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

これを試して：

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

これは、tempが1の場合にのみchecked属性を表示します。

0
Charmy Shah

angular 2チェックボックスの値はtrue、チェックボックスは選択されています：

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

tempがブール値の場合は[value]="true"を使用する必要があります。tempがtrueの場合はチェックボックスがオンになり、tempがfalseの場合はチェックボックスがオフになり、value="true"を使用する場合はtempは文字列になります。

0
yesterday_time