为了账号安全,请及时绑定邮箱和手机立即绑定

Angular 2复选框双向数据绑定

/ 猿问

Angular 2复选框双向数据绑定

HUWWW 2019-12-17 10:49:58

我是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中操作复选框(就像我想在Component中的操作一样)ngOnInit。


查看完整描述

3 回答

?
沧海一幻觉

您可以.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


查看完整回答
反对 回复 2019-12-17
?
斯蒂芬大帝

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


而是简单的:


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

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


之后,当将模型checkboxFlag从后端或UI部件更改为voila时,checkboxFlag将存储实际的复选框状态。


确保已经准备好Plunker代码以显示结果:https ://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk


只是为了完成此答案,您应该包括import { FormsModule } from '@angular/forms'into app.module.ts和add to import数组,即


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


[...]


@NgModule({

  imports: [

    [...]

    FormsModule

  ],

  [...]

})


查看完整回答
反对 回复 2019-12-17
?
叮当猫咪

我喜欢更明确的内容:


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;

}


查看完整回答
反对 回复 2019-12-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信