首页 文章

Angular 2复选框双向数据绑定

提问于
浏览 次
107

我是Angular2的新手，我有一点问题：

在我的Login-Component-HTML中，我有两个复选框，我希望以双向数据绑定方式绑定到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']);
    }

如果单击复选框，我会在控制器（组件）中获得正确的值 .

但是，如果我在组件中更改了例如 saveUsername 的值，则复选框不会是新值 .

所以我无法操纵Component中的复选框（就像我想在组件中的 ngOnInit 中那样） .

谢谢你的帮助！

html angular typescript checkbox data-binding

9 回答

  • 3

    您必须将 name="selected" 属性添加到 input 元素 .

    例如：

    <div class="checkbox">
    <label>
        <input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Benutername speichern
    </label>
  </div>
    回复于
  • 2

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

    回复于
  • 2

    不幸的是@hakani提供的解决方案不是 two-way binding . 它只是处理来自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
  ],
  [...]
})
    回复于
  • 1

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

    <input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">
    回复于
  • 24

    我更喜欢更明确的东西：

    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;
}
    回复于
  • 71

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

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

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

    @Input() bar;
@Output() barChange = new EventEmitter();
    回复于
  • 4

    你可以使用这样的东西来进行双向数据绑定：

    <input type="checkbox" [checked]="model.propertie" (change)="model.propertie = !model.consent_obtained_ind">
    回复于
  • 17

    要获得复选框工作，您应该遵循以下所有步骤：

    • 在您的模块中导入 FormsModule

    • 将输入放在 form 标记内

    • 你的输入应该是这样的：

    <input name="mpf" type="checkbox" [(ngModel)]="value" />

    注意：不要忘记在输入中输入名称 .

    回复于
  • 191

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

    我的组件： <input type="checkbox" [(ngModel)]="model" >

    _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">
    回复于

相关问题