Angular 2 Checkbox 雙向數據綁定 - Angular 2 Checkbox Two Way Data Binding

問題：

I´m fairly new to Angular2 and I have a little problem:我對 Angular2 還很陌生，我有一個小問題：

In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript.在我的 Login-Component-HTML 中，我有兩個複選框，我想以兩種方式將它們綁定到 Login-Component-TypeScript。

This is the HTML:這是 HTML：

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

And this is the Component.ts:這是 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']);
    }

If I click an checkbox, I get the correct value in the controller (component).如果我單擊一個複選框，我會在控制器（組件）中獲得正確的值。

But if I change the value of for example saveUsername in the component, the checkbox didn't "get" the new value.但是，如果我更改組件中例如saveUsername的值，則複選框不會“獲取”新值。

So I can´t manipulate the checkbox from the Component (like I want to do in the ngOnInit in the component.所以我不能從組件中操作複選框（就像我想在組件中的ngOnInit中做的ngOnInit 。

Thanks for your help!感謝您的幫助！

---

解決方案：

參考一： https://en.stackoom.com/question/2ijfT
參考二： https://stackoom.com/question/2ijfT