我是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组件中的值,则复选框不会“获取”新值。
saveUsername
因此,我无法操作Component中的复选框(就像我想在Component中的操作一样)ngOnInit。
ngOnInit
谢谢你的帮助!
由于saveUsername是布尔值,因此可以.selected从saveUsername复选框输入中删除。代替[(ngModel)]使用[checked]="saveUsername" (change)="saveUsername = !saveUsername"
.selected
[(ngModel)]
[checked]="saveUsername" (change)="saveUsername = !saveUsername"
编辑:正确的解决方案:
<input type="checkbox" [checked]="saveUsername" (change)="saveUsername = !saveUsername"/>
更新: 就像@newman注意到ngModel以某种形式使用时,它将无法正常工作。但是,您应该使用如下[ngModelOptions]属性(在Angular 7中测试):
ngModel
[ngModelOptions]
<input type="checkbox" [(ngModel)]="saveUsername" [ngModelOptions]="{standalone: true}"/> `