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

谢谢你的帮助!

527219 次浏览
小开
最佳答案

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

正确答案:

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

就像@newman注意到的那样，当ngModel在一个表单中使用时，它将不起作用。然而，你应该像这样使用[ngModelOptions]属性(在Angular 7中测试过):

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

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

小开

你可以使用类似这样的东西来实现两种数据绑定:

<input type="checkbox" [checked]="model.property" (change)="model.property = !model.consent_obtained_ind">
小开

不幸的是，@hakani提供的解决方案不是双向绑定。它只处理从UI/FrontEnd部分单向更改模型。

而是简单的:

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

将为复选框做双向绑定。

之后，当模型checkboxFlag从后端或UI部分更改时——瞧，checkboxFlag存储实际的复选框状态。

为了确保我已经准备了Plunker代码来呈现结果:https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

为了完成这个答案，你应该将import { FormsModule } from '@angular/forms'包含到app.module.ts中，并添加到imports数组中

import { FormsModule } from '@angular/forms';


[...]


@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
小开

我更喜欢更明确的说法:

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;
}
小开

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

Mycomponent < p >添加: <input type="checkbox" [(ngModel)]="model" > < / p > 
_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">
小开

在angular上使用<abc [(bar)]="foo"/>语法时。

这句话的意思是: <abc [bar]="foo" (barChange)="foo = $event" /> < / p >

这意味着你的组件应该有:

@Input() bar;
@Output() barChange = new EventEmitter();
小开

要让复选框工作，你应该遵循以下步骤:

  1. 在你的模块中导入FormsModule
  2. 将输入放在form标记中

  3. 你的输入应该是这样的:

    <input name="mpf" type="checkbox" [(ngModel)]="value" />

    注意:不要忘记输入name

小开

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

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

必须将name="selected"属性添加到input元素中。

例如:

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

在任何情况下，如果你必须绑定一个非布尔值的复选框，那么你可以尝试下面的选项

在Html文件中:

<div class="checkbox">
<label for="favorite-animal">Without boolean Value</label>
<input type="checkbox" value="" [checked]="ischeckedWithOutBoolean == 'Y'"
(change)="ischeckedWithOutBoolean = $event.target.checked ? 'Y': 'N'">
</div>

在组件ischeckedWithOutBoolean: any = 'Y'; < /代码> < / p >

见stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html < / p >

小开

如果你想将复选框与for循环一起使用，有一种特殊的解决方法是将复选框的状态存储在数组中，并根据*ngFor循环的索引更改它。通过这种方式，您可以更改组件中复选框的状态。

app.component.html

<div *ngFor="let item of items; "索引为i”> <input type="checkbox" [checked]="category[i]" (change)="checkChange(i)"> \{\{item.name}} 代码& lt; / div> < / > < / p >

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;
}
}
小开

我的angular指令像angularjs (ng-true-value ng-false-value)

@Directive({
selector: 'input[type=checkbox][checkModel]'
})
export class checkboxDirective {
@Input() checkModel:any;
@Input() trueValue:any;
@Input() falseValue:any;
@Output() checkModelChange = new EventEmitter<any>();


constructor(private el: ElementRef) { }


ngOnInit() {
this.el.nativeElement.checked = this.checkModel==this.trueValue;
}


@HostListener('change', ['$event']) onChange(event:any) {
this.checkModel = event.target.checked ? this.trueValue : this.falseValue;
this.checkModelChange.emit(this.checkModel);
}


}

超文本标记语言

<input type="checkbox" [(checkModel)]="check" [trueValue]="1" [falseValue]="0">
小开

在Angular的p-复选框中，

使用p-复选框的所有属性

<p-checkbox name="checkbox" value="isAC"
label="All Colors" [(ngModel)]="selectedAllColors"
[ngModelOptions]="{standalone: true}" id="al"
binary="true">
</p-checkbox>

更重要的是，不要忘记包括[ngModelOptions]="{standalone: true}以及它SAVED MY DAY。

小开

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

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

[ngModelOptions]="{standalone: true}"

最终的超文本标记语言应该是这样的:

<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;
})
}

希望这有助于 非常感谢< / p >

小开 
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;

提交答案