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中的复选框(就像我想ngOnInit在组件中做的那样).

谢谢你的帮助!

Answer 1

你可以.selected从saveUsername你的复选框输入中删除,因为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

Answer 2

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

相反简单:

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

将为复选框执行双向绑定.

之后,当从后端或UI部分更改Model checkboxFlag时,checkboxFlag会存储实际的复选框状态.

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

只是为了完成这个答案你应该包括import { FormsModule } from '@angular/forms'进入app.module.ts和添加到导入数组即

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

[...]

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

Answer 3

我正在使用Angular5,我必须添加"name"属性才能使绑定工作......绑定不需要"id".

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

Answer 4

我更喜欢更明确的东西:

component.html

<input #saveUserNameCheckBox
    id="saveUserNameCheckBox" 
    type="checkbox" 
    [checked]="saveUsername" 
    (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />

component.ts

public saveUsername:boolean;

public onSaveUsernameChanged(value:boolean){
    this.saveUsername = value;
}

Answer 5

Angular: "9.0.0"
Angular CLI: 9.0.1
Node: 13.10.1
OS: linux x64

.html 文件

<input [(ngModel)]="userConsent" id="userConsent" required type="checkbox"/> " I Accept"

.ts 文件

userConsent: boolean = false;

Answer 6

<abc [(bar)]="foo"/>在角度上使用语法时.

这意味着: <abc [bar]="foo" (barChange)="foo = $event" />

这意味着您的组件应具有:

@Input() bar;
@Output() barChange = new EventEmitter();

Answer 7

您可以使用类似这样的方法进行两种方式的数据绑定：

<input type="checkbox" [checked]="model.property" (change)="model.property = !model.consent_obtained_ind">