我对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中做的那样。

谢谢你的帮助!


当前回答

我更喜欢更明确的说法:

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;
}

其他回答

在任何情况下,如果你必须绑定一个非布尔值的复选框,那么你可以尝试下面的选项

在Html文件中:

<div class="checkbox">
<label for="favorite-animal">Without boolean Value</label>
<input type="checkbox" value="" [checked]="ischeckedWithOutBoolean == 'Y'" 
(change)="ischeckedWithOutBoolean = $event.target.checked ? 'Y': 'N'">
</div>

在componentischeckedWithOutBoolean: any = 'Y';

在斯塔克布利茨 https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

要让复选框工作,你应该遵循以下步骤:

在你的模块中导入FormsModule 将输入放在表单标记中 你的输入应该像这样: <input name="mpf" type="checkbox" [(ngModel)]="value" /> 注意:不要忘记输入姓名。

我已经做了一个自定义组件尝试双向绑定

Mycomponent: <输入类型=“checkbox”[(ngModel)]=“模型”>

_model:  boolean;   

@Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();

@Input('checked')
set model(checked: boolean) {

  this._model = checked;
  this.checked.emit(this._model);
  console.log('@Input(setmodel'+checked);
}

get model() {
  return this._model;
}

奇怪的是,这种方法奏效了

<mycheckbox  [checked]="isChecked" (checked)="isChecked = $event">

虽然这不会

<mycheckbox  [(checked)]="isChecked">

我正在使用Angular5,我必须添加"name"属性来让绑定工作…绑定时不需要“id”。

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

因为saveUsername是一个布尔值,所以你可以在你的复选框中删除saveUsername中的.selected。代替[(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