Angular 2复选框双向数据绑定

Question

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

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

谢谢你的帮助！

亚什德汉·保拉尼克（Yashwardhan Pauranik） · Accepted Answer · 2019-07-18 06：37：54Z

您可以.selected从saveUsername复选框输入中删除，因为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}"/> `

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

如果执行此操作，则会出现错误：错误：无法分配给引用或变量！ — Junias, '16
嗯，我已经收到此错误：未处理的承诺拒绝：无法分配给引用或变量！; 区域：<root>; 任务：Promise.then; 值：错误：无法分配给引用或变量！以及该复选框如何知道是否应该打开/关闭？在Angular 1中，我可以这样做，$scope.loginData = {}; $scope.loginData.username = window.localStorage.getItem("username");并且可以在模板中这样做：<ion-toggle ng-model="saveUsername" ng-change="toggleSaveUsername()" toggle-class="toggle-energized">Benutzername speichern</ion-toggle> — Junias, 16
您能否删除#saveUsername并重试。另请参阅plunker：embed.plnkr.co/ffkrDzon1L3ZANiuGFsp — hakany, 16
checkbox知道是因为[checked]，如果saveUsername == true，则设置为checked，并且（更改）使用相反的值更新其值；如果saveUsername为true，则为！true，它等于false。 — hakany, 16
当ngModel以某种形式使用时，它将不起作用。[ngModelOptions]="{standalone: true}"是我所需要的 — rainversion_3, Apr 1 at 15:11

杰特 · Answer 2 · 2017-10-30 09：04：55Z

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

而是简单的：

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

将对复选框进行双向绑定。

之后，当将模型checkboxFlag从后端或UI部件更改为voila时，checkboxFlag将存储实际的复选框状态。

确保已经准备好Plunker代码以显示结果：https ://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

只是为了完成此答案，您应该包括import { FormsModule } from '@angular/forms'into app.module.ts和add to import数组，即

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

[...]

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

当您ngFor在重复使用一系列对象（例如[{"checked":true},{"checked":false}] — jackOfAll 2015年, 6月28日
我无法获得这种解决方案的工作，我知道cUncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input' — sebnukem, 17
@input内的@sebnukem必须使用名称属性才能使用[[ngModel）] — Angela Pan, Mar 18年7月7日16:17
它也适用于多个复选框吗？<input type="checkbox" [(ngModel)]="day.IsChecked" [checked]="day.IsChecked" /> — Vedant, 18

克里斯·基尔顿 · Answer 3 · 2018-11-09 18：21：41Z

我正在使用Angular5，我必须添加“名称”属性才能使绑定正常工作...绑定不需要“ id”。

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

这个答案对我有用。其他答案也是正确的。但是使用[（ngModel）]，我们不必编写单独的函数来切换布尔值 — Jasmeet, 18

MovGP0 · Answer 4 · 2017-08-18 11：58：50Z

我喜欢更明确的内容：

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

斯凡 · Answer 5 · 2017-09-21 20:04:01Z

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

转换为： <abc [bar]="foo" (barChange)="foo = $event" />

这意味着您的组件应具有：

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

答案非常好-简短明了，但应该在另一个问题下 — Nikita，, 18

比萨饼 · Answer 6 · 2018-12-27 02：50：40Z

您可以使用类似这样的方法进行两种方式的数据绑定：

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

马赫迪（Mahdi Shahbazi） · Answer 7 · 2017-10-12 22：11：14Z

要使复选框起作用，您应该执行以下所有步骤：

导入 FormsModule 模块
将输入内容放入form标签中
您的输入应如下所示：
```
<input name="mpf" type="checkbox" [(ngModel)]="value" />
```
注意：不要忘记在输入中输入名称。

比萨饼 · Answer 8 · 2018-12-26 10：59：56Z

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

例如：

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

安道尔齐泽德 · Answer 9 · 2017-12-13 16：31：14Z

我做了一个自定义组件，尝试了两种方式的绑定

我的组件： <input type="checkbox" [(ngModel)]="model" >

_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">

萨比尔 · Answer 10 · 2019-02-08 05：30：32Z

在任何情况下，如果必须将值与非布尔值的复选框绑定，则可以尝试以下选项

在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';

参见stackblitz中的 https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

席德 · Answer 11 · 2019-08-19 01：20：28Z

特别是要在带循环的情况下使用复选框的一种解决方法是，将复选框的状态存储在数组中，并根据*ngFor循环的索引对其进行更改。这样，您可以更改组件中复选框的状态。

app.component.html

<div *ngFor="let item of items; index as i"> <input type="checkbox" [checked]="category[i]" (change)="checkChange(i)"> {{item.name}} </div>

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

埃德加多·里维拉（Edgardo Rivera） · Answer 12 · 2019-08-28 19：22：35Z

我的角度指令，例如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);
    }

}

html

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

嗨，请解释您的问题，您尝试了什么，并为您的问题添加了一些背景信息 — 538ROMEO, 8月28日19:43

但丁·法纳·巴迪亚（DanteFañaBadia） · Answer 13 · 2019-11-17 20：40：12Z

在Angular p复选框中，

使用p-checkbox的所有属性

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

而且更重要的是，不要忘了包括“ [ngModelOptions]="{standalone: true}保存的我的日子”以及它。

You are here

angular checkbox ngmodel 模型比向绑定有大用

Angular 2复选框双向数据绑定

13个答案正确答案

来自 https://stackoverflow.com/questions/40214655/angular-2-checkbox-two-way-data-binding

友情链接

搜索表单

用户登录

You are here

angular checkbox ngmodel 模型比向绑定 有大用

Angular 2复选框双向数据绑定

13个答案 正确答案

来自 https://stackoverflow.com/questions/40214655/angular-2-checkbox-two-way-data-binding

友情链接

angular checkbox ngmodel 模型比向绑定有大用

13个答案正确答案