Angular 2复选框双向数据绑定

  • Z时代
  • 2024-01-10
  • 分类：问答

我是Angular2的新手，但有一个小问题：

在我的Login-Component-HTML中，我有两个复选框，我想通过两种方式将数据绑定到Login-Component-TypeScript。

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

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组件中的值，则复选框不会“获取”新值。

因此，我无法操作Component中的复选框（就像我想在Component中的操作一样）ngOnInit。

谢谢你的帮助！

回答：

由于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}"/> `

以上是 Angular 2复选框双向数据绑定 的全部内容， 来源链接： utcz.com/qa/408054.html

回到顶部