Angular 2复选框双向数据绑定 [英] Angular 2 Checkbox Two Way Data Binding

问题描述

我对Angular2相当陌生，而且有一点问题：

在我的Login-Component-HTML中，我有两个复选框，我想要绑定以两种方式与Login-Component-TypeScript进行数据绑定。

这是HTML：
$ b

 < div class =checkbox> 
< label> 
< input #saveUsername [（ngModel）] =saveUsername.selectedtype =checkboxdata-toggle =toggle> Benutername speichern 
< / label 
> < / DIV> 
  

这就是Component.ts：

 从'@ angular / core'导入{Component，OnInit}; 
从'@ angular / router'导入{Router}; 
从'../../services/variables'导入{Variables}; 
 $ b $ @Component（{
选择器：'login'，
 moduleId：module.id，
 templateUrl：'login.component.html'，
 styleUrls：['login.component.css'] 
}）
 
 
导出类LoginComponent实现OnInit {
 
 private saveUsername：boolean = true; 
 private autoLogin：boolean = true; 
构造函数（私有路由器：路由器，私有变量：变量）{} 
 
 ngOnInit（）{
 this.loginValid = false; 
 //如果（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））; 
 
 
 $ b $登录（用户名：字符串，密码：字符串，saveUsername：布尔值，autoLogin：布尔值）{
 this.variables.setUsername（username）; 
 this.variables.setPassword（password）; 
 this.variables.setIsLoggedIn（true）; 
 console.log（saveUsername，autoLogin）; 
 //this.router.navigate (['dashboard']）; 
 
 
 
 
 
 $ b如果点击复选框，我会在控制器中获得正确的值）。
 
 
但是，如果我在组件中更改了例如 saveUsername 的值，则复选框不会获得新的价值。
 
 
所以我不能操作Component中的复选框（就像我想在 ngOnInit  
 
感谢您的帮助！
解决方案
您可以在复选框输入中从 saveUsername 中移除 .selected ，因为saveUsername是一个布尔值，而不是 [（ngModel）] 使用 [checked] =saveUsername（change）=saveUsername =！saveUsername 
 
 
 
编辑：正确的解决方案： 
 
 
 < input type =checkbox[ checked] =saveUsername（change）=saveUsername =！saveUsername/> 
  
 
I´m fairly new to Angular2 and I have a little problem:


In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript.

This is the HTML:
<div class="checkbox">
<label>
<input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Benutername speichern
</label
></div>
And this is the 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;
        // Hole Usernamen aus Local Storage falls gespeichert werden soll
        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.

So I can´t manipulate the checkbox from the Component (like I want to do in the ngOnInit in the component.

Thanks for your help!
解决方案
you can remove .selected from saveUsername in your checkbox input since saveUsername is a boolean. instead of [(ngModel)] use  [checked]="saveUsername" (change)="saveUsername = !saveUsername"

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


                        
这篇关于Angular 2复选框双向数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！