Угловое 2 Галочка двухсторонняя Привязка данных

Question

I'm довольно новое Angular2 и у меня есть небольшая проблема:

В моей Вход-Компонентный-HTML, у меня есть две галочки, которые я хочу, чтобы связать в двухполосных данных привязка к элементу Login-Component-TypeScript.

Это HTML:

<div class="checkbox"> 
<label> 
<input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Benutername speichern 
</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; 
     // Hole Usernamen aus Local Storage falls gespeichert werden soll 
     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 в компоненте.

Спасибо за вашу помощь!

Answer 1

вы можете удалить .selected из saveUsername в вашем флажком вход поскольку saveUsername является булевой вместо [(ngModel)] использования [checked]="saveUsername" (change)="saveUsername = !saveUsername"

Edit:. Правильное решение:

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

Answer 2

Вы можете просто использовать что-то вроде этого, чтобы иметь два пути связывания данных:

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

Answer 3

К сожалению решение, предоставляемое @hakani является не двухстороннее связывание. Он просто обрабатывает одностороннюю меняющуюся модель из части UI/FrontEnd.

Вместо простой:

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

будет делать двухстороннюю привязку для флажка.

Впоследствии, когда модель checkboxFlag изменен с сайта Backend или UI - voila, checkboxFlag сохраняет фактическое состояние флажка.

Чтобы быть уверенным, я подготовил Plunker код, чтобы представить результат: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Просто, чтобы закончить этот ответ вы должны включить import { FormsModule } from '@angular/forms' в app.module.ts и добавить импорт массива т.е.

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

[...] 

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

Answer 4

Я предпочитаю что-то более определенно:

component.html

<input #saveUserNameCheckBox 
    id="saveUserNameCheckBox" 
    type="checkbox" 
    [checked]="saveUsername" 
    (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" /> 

Компонент.ц

public saveUsername:boolean; 

public onSaveUsernameChanged(value:boolean){ 
    this.saveUsername = value; 
} 

Answer 5

Я сделал пользовательский компонент попытался два способа связывания

MyComponent: <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 6

При использовании <abc [(bar)]="foo"/> синтаксис на угловых.

Это приводит к: <abc [bar]="foo" (barChange)="foo = $event" />

Что означает, что ваш компонент должен иметь:

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

Answer 7

Чтобы получить флажок работы вы должны соблюдать все эти шаги:

1. импорт FormsModule в модуле
2. Поместите ввод внутри form тег

3. ваш вход должен быть таким:

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

   Примечание: не забудьте поставить имя в входе.

Answer 8

Я работаю с Angular5, и мне пришлось добавить атрибут «name», чтобы получить привязку к работе ... «id» не требуется для привязки.

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

Answer 9

Вы должны добавить name="selected" атрибут input элемента.

Например:

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