我对Angular2还比较陌生,我有一个小问题:

在我的Login-Component-HTML中,我有两个复选框,我希望以双向数据绑定的方式将它们绑定到Login-Component-Typecript.

This is the HTML:

<div class="checkbox">
<label>
    <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username
</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;
        // 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中操作的那样).

谢谢你的帮忙!

推荐答案

您可以在复选框输入中从saveUsername中删除.selected,因为saveUsername是一个布尔值.用[checked]="saveUsername" (change)="saveUsername = !saveUsername"代替[(ngModel)]

编辑:正确的解决方案:

<input
  type="checkbox"
  [checked]="saveUsername"
  (change)="saveUsername = !saveUsername"/>

Update:就像@newman注意到的,当ngModel被用在一个表单中时,它将不起作用.但是,应该使用[ngModelOptions]属性,比如(在Angular 7中测试):

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

我还在Stackblitz创建了一个示例:https://stackblitz.com/edit/angular-abelrm

Html相关问答推荐

迪夫导航栏的一些组件显示在导航栏之外,有人能帮助我解决这个问题吗?

悬停时放大人物:不要增加其周围边界的大小

Font Awesome 6插入符号未显示

Angular 滑块问题

在css嵌套 Select 器中,尾随的`&;‘是什么意思?

如何收集<;p&>元素下的<;p>;子元素

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

在Firefox中,使用写入模式:Vertical-LR时,不随内容扩展的css弹性项

我正在try 向列表中的图像添加悬停,以放大图像并将div的不透明度设置为1而不是0

在R中从网页上的特定iframe中提取图形数据

Angular MatBadge 在高于 99 时不显示完整数字

是否可以制作响应式 CSS 剪辑路径?

如何检测输入字段是否没有必填且没有占位符?

如何实现与内嵌图像对齐的自动换行?

防止HTML输入中出现负数但接受小数

绝对类在另一个绝对类之上

有没有办法在 Flutter 中创建这个浮动标签表单?

单击时 HTML 锚元素不重定向到相对路径

每次按下按钮时减小字体大小的 jquery 函数

html tailwindcss 给 li 标签添加边框