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&nbsp; &nbsp; id="saveUserNameCheckBox"&nbsp;&nbsp; &nbsp; type="checkbox"&nbsp;&nbsp; &nbsp; [checked]="saveUsername"&nbsp;&nbsp; &nbsp; (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />component.tspublic saveUsername:boolean;public onSaveUsernameChanged(value:boolean){&nbsp; &nbsp; this.saveUsername = value;}