Angular 2复选框双向数据绑定

Question

我是Angular2的新手，但有一个小问题：在我的Login-Component-HTML中，我有两个复选框，我想通过两种方式将数据绑定到Login-Component-TypeScript。这是HTML：<div class="checkbox"><label>    <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username</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;        // Get user name from local storage if you want to save        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']);    }如果单击复选框，则会在控制器（组件）中获得正确的值。但是，如果我更改了例如saveUsername组件中的值，则复选框不会“获取”新值。因此，我无法从Component中操作复选框（就像我想在Component中的操作一样）ngOnInit。

Answer 1

我喜欢更明确的内容：

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;

}