角度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>

这是组件.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中所做的那样）。

谢谢你的帮助！

Answer 1

我正在使用Angular5，我必须添加“name”属性来使绑定工作...绑定不需要“ID”。

<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">

Answer 2

不幸的是，@Hakani提供的解决方案不是双向绑定的。它只处理UI/前端部分的单向模型转换。

取而代之的是简单的：

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

将对CheckBox执行双向绑定。

之后，当模型checkboxFlag从后端或UI部分更改时-瞧，checkboxFlag存储实际的checkbox状态。

当然，我已经准备了Plunker代码来显示结果:https://plnkr.co/edit/odeapwroqaj0t6yp0mfk

为了完成这个回答，您应该将import{FormsModule}从“@angular/forms”包含到app.module.ts中，并添加到imports数组，即

import { FormsModule } from '@angular/forms';

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

Answer 3

您可以在复选框输入中从saveUsername中删除.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