角2复选框双向数据绑定
我是Angular2的新手，我有个小问题：
在我的Login-Component-HTML中，我有两个复选框，我想用两种方式将它们绑定到登录组件类型记录。
这是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中做的那样)。
谢谢你的帮忙!
回答 14
Stack Overflow用户
发布于 2016-10-24 09:16:00
您可以在复选框输入中从.selected中删除saveUsername，因为saveUsername是一个布尔值。使用[(ngModel)]代替[checked]="saveUsername" (change)="saveUsername = !saveUsername"
编辑:正确的解决方案：
<input
type="checkbox"
[checked]="saveUsername"
(change)="saveUsername = !saveUsername"/>更新:像@newman一样的注意到，当ngModel以一种形式使用时，它将无法工作。但是，您应该使用[ngModelOptions]属性，如(在角7中测试)：
<input
type="checkbox"
[(ngModel)]="saveUsername"
[ngModelOptions]="{standalone: true}"/> `我还在Stackblitz创建了一个示例：https://stackblitz.com/edit/angular-abelrm
Stack Overflow用户
发布于 2017-03-13 10:51:29
不幸的是，@hakani提供的解决方案不是双向绑定。它只处理来自UI/前端部分的单向更改模型。
取而代之的是简单的：
<input [(ngModel)]="checkboxFlag" type="checkbox"/>将为复选框执行双向绑定。
之后，当Model checkboxFlag 从后端或UI部件-瞧更改时，checkboxFlag存储实际的复选框状态。
为了确保我已经准备好柱塞代码来显示结果：https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk
为了完成这个答案，您应该将import { FormsModule } from '@angular/forms'包含到app.module.ts中，然后添加到imports数组，即
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})Stack Overflow用户
发布于 2017-08-18 11:58:50
我更喜欢更明确的：
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;
}https://stackoverflow.com/questions/40214655
复制相似问题
腾讯云开发者
