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的工作，你应该遵循所有这些步骤：
- 在你的模块中导入
FormsModule - 将input放在
form标签中 -
你的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();
