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 的值，则复选框不会“获取”新值。

所以我不能从组件中操作复选框（就像我想在组件中的 ngOnInit 中做的那样。

谢谢你的帮助！

原文由 Junias 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

原文由 hakany 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不幸的是@hakani 提供的解决方案不是 双向绑定。它只处理来自 UI/FrontEnd 部分的单向更改模型。

取而代之的是简单的：

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

将为复选框进行双向绑定。

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

为了确保我已经准备好 Plunker 代码来呈现结果： https ://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

为了完成这个答案，您应该将 import { FormsModule } from '@angular/forms' 包含到 app.module.ts 并添加到导入数组即

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

[...]

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

原文由 Ruslan Makrenko 发布，翻译遵循 CC BY-SA 3.0 许可协议