Angular 2选中双向数据绑定

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

谢谢你的帮助!

当前回答

我知道这可能是重复的答案但是对于任何一个想要加载带有selectall复选框的复选框列表的人来说，我遵循这个例子: 使用angular 2+选中所有/取消选中所有复选框

它工作得很好，只是需要添加

[ngModelOptions]="{standalone: true}"

最终的HTML应该是这样的:

<ul>
    <li><input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/></li>
    <li *ngFor="let n of names">
    <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">{{n.name}}
    </li>
  </ul>

打印稿

  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

希望这对你有所帮助非常感谢

2020-02-25 13:37:55

其他回答

如果你想在for循环中使用复选框，有一种变通方法可以实现同样的效果，那就是将复选框的状态存储在数组中，并根据*ngFor循环的索引更改它。通过这种方式，您可以更改组件中复选框的状态。

app.component.html

app.component.ts

items = [
    {'name':'salad'},
    {'name':'juice'},
    {'name':'dessert'},
    {'name':'combo'}
  ];

  category= []

  checkChange(i){
    if (this.category[i]){  
      this.category[i] = !this.category[i];
    }
    else{
      this.category[i] = true;
    }
  }

2019-08-19 01:20:28

Angular: "9.0.0"
Angular CLI: 9.0.1
Node: 13.10.1
OS: linux x64

. html文件

<input [(ngModel)]="userConsent" id="userConsent" required type="checkbox"/> " I Accept"

.ts文件

userConsent: boolean = false;

2020-06-09 12:16:34

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

例如:

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

2018-02-28 13:04:45

我已经做了一个自定义组件尝试双向绑定

Mycomponent: <输入类型=“checkbox”[(ngModel)]=“模型”>

_model:  boolean;   

@Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();

@Input('checked')
set model(checked: boolean) {

  this._model = checked;
  this.checked.emit(this._model);
  console.log('@Input(setmodel'+checked);
}

get model() {
  return this._model;
}

奇怪的是，这种方法奏效了

<mycheckbox  [checked]="isChecked" (checked)="isChecked = $event">

虽然这不会

<mycheckbox  [(checked)]="isChecked">

2017-08-31 12:43:23

我正在使用Angular5，我必须添加"name"属性来让绑定工作…绑定时不需要“id”。

<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">

2017-12-13 18:33:19

Angular 2选中双向数据绑定

推荐文章

最新文章

标签