Angular 2checkbox双向数据绑定

我是相当新的Angular2,我有一个小问题:在我的login组件HTML中,我有两个checkbox,我想以两种方式绑定到login组件TypeScript的数据绑定。 这是HTML:

<div class="checkbox"> <label> <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Benutername speichern </label ></div> 

这是Component.ts:

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Variables } from '../../services/variables'; @Component({ selector: 'login', moduleId: module.id, templateUrl: 'login.component.html', styleUrls: ['login.component.css'] }) export class LoginComponent implements OnInit { private saveUsername: boolean = true; private autoLogin: boolean = true; constructor(private router: Router, private variables: Variables) { } ngOnInit() { this.loginValid = false; // Hole Usernamen aus Local Storage falls gespeichert werden soll if (window.localStorage.getItem("username") === null) { this.saveUsername = true; this.autoLogin = true; console.log(this.saveUsername, this.autoLogin); } else { console.log("init", window.localStorage.getItem("username")); } } login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) { this.variables.setUsername(username); this.variables.setPassword(password); this.variables.setIsLoggedIn(true); console.log(saveUsername, autoLogin); //this.router.navigate(['dashboard']); } 

如果我点击一个checkbox,我在控制器(组件)中得到正确的值。 但是,如果我更改组件中的saveUsername的值,checkbox没有“获取”新的值。 所以我不能操纵组件中的checkbox(就像我想在组件中的ngOnInit中做的ngOnInit

谢谢你的帮助!

你可以从checkboxinput中的saveUsername中删除。因为saveUsername是一个布尔值。 而不是[(ngModel)]使用[checked]="saveUsername" (change)="saveUsername = !saveUsername"

编辑:正确的解决scheme:

 <input type="checkbox" [checked]="saveUsername" (change)="saveUsername = !saveUsername" /> 

不幸的是@hakani提供的解决scheme不是双向绑定 。 它只是从UI / FrontEnd部分处理单向改变模型。

相反,简单的:

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

会做checkbox的双向绑定。

之后,当模型checkboxFlag从后端或UI部分改变 – 瞧,checkboxFlag存储实际的checkbox状态。

为了确保我已经准备好Plunker代码来呈现结果: https ://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

只是为了完成这个答案,你应该包括import { FormsModule } from '@angular/forms'app.module.ts并添加到import数组ie

 import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] }) 

你可以使用像这样的东西来进行双向数据绑定:

 <input type="checkbox" [checked]="model.propertie" (change)="model.propertie = !model.consent_obtained_ind"> 

我更喜欢更明确的东西:

component.html

 <input #saveUserNameCheckBox id="saveUserNameCheckBox" type="checkbox" [checked]="saveUsername" (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" /> 

component.ts

 public saveUsername:boolean; public onSaveUsernameChanged(value:boolean){ this.saveUsername = value; } 

要获得checkbox的工作,你应该遵循所有这些步骤:

  1. 在你的模块中导入FormsModule
  2. 将input放在form标签中
  3. 你的input应该是这样的:

     <input name="mpf" type="checkbox" [(ngModel)]="value" /> 

    注意:不要忘记在你的input中input名字。

我已经做了一个自定义组件尝试双向绑定

Mycomponent: <input type="checkbox" [(ngModel)]="model" >

 _model: boolean; @Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>(); @Input('checked') set model(checked: boolean) { this._model = checked; this.checked.emit(this._model); console.log('@Input(setmodel'+checked); } get model() { return this._model; } 

奇怪的是这个工程<mycheckbox [checked]="isChecked" (checked)="isChecked = $event">

而这不会<mycheckbox [(checked)]="isChecked">

在angular度上使用<abc [(bar)]="foo"/>语法时。

这转换为: <abc [bar]="foo" (barChange)="foo = $event" />

这意味着你的组件应该有:

 @Input() bar; @Output() barChange = new EventEmitter();