[解決済み】Angular 2 チェックボックスの双方向データバインディング

質問

私はAngular2の初心者なのですが、ちょっとした問題があります。

Login-Component-HTMLに、2つのチェックボックスがあり、Login-Component-TypeScriptに2通りのデータバインディングでバインドしたい。

これがその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 を使用すると、チェックボックスは新しい値を取得できませんでした。

そのため、コンポーネントからチェックボックスを操作することができません。 ngOnInit をコンポーネント内で使用します。

ありがとうございました。

解決方法は？

を削除することができます。 .selected から saveUsername はブール値であるため、チェックボックスの入力に使用することができます。代わりに [(ngModel)] 使用 [checked]="saveUsername" (change)="saveUsername = !saveUsername"

編集部：正しい解答です。

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

更新しました。 のときに @newman が気づいたように ngModel をフォームで使用した場合、動作しません。しかし [ngModelOptions] のような属性があります（Angular 7でテスト済み）。

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

Stackblitzで例題も作りました。 https://stackblitz.com/edit/angular-abelrm