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

谢谢你的帮助!


当前回答

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

而是简单的:

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

将为复选框做双向绑定。

之后,当模型checkboxFlag从后端或UI部分更改时——瞧,checkboxFlag存储实际的复选框状态。

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

为了完成这个回答,你应该把import {FormsModule}从'@angular/forms'包含到app.module.ts中,并添加到imports数组中

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

[...]

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

其他回答

我的angular指令像angularjs (ng-true-value ng-false-value)

@Directive({
    selector: 'input[type=checkbox][checkModel]'
})
export class checkboxDirective {
    @Input() checkModel:any;
    @Input() trueValue:any;
    @Input() falseValue:any;
    @Output() checkModelChange = new EventEmitter<any>();

    constructor(private el: ElementRef) { }

    ngOnInit() {
       this.el.nativeElement.checked = this.checkModel==this.trueValue;
    }

    @HostListener('change', ['$event']) onChange(event:any) {
        this.checkModel = event.target.checked ? this.trueValue : this.falseValue;
        this.checkModelChange.emit(this.checkModel);
    }

}

html

<input type="checkbox" [(checkModel)]="check" [trueValue]="1" [falseValue]="0">

在angular上使用<abc [(bar)]="foo"/>语法时。

这句话的意思是: <abc [bar]="foo" (barChange)="foo = $event" />

这意味着你的组件应该有:

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

你可以使用类似这样的东西来实现两种数据绑定:

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

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

而是简单的:

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

将为复选框做双向绑定。

之后,当模型checkboxFlag从后端或UI部分更改时——瞧,checkboxFlag存储实际的复选框状态。

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

为了完成这个回答,你应该把import {FormsModule}从'@angular/forms'包含到app.module.ts中,并添加到imports数组中

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

[...]

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

您必须在输入元素中添加name="selected"属性。

例如:

<div class="checkbox">
  <label>
    <input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Save username
  </label>
</div>