Opção Angular 2 Ligação De Dados Bidireccionais
sou bastante novo em Angular2 e tenho um pequeno problema:
no meu componente de Login-HTML, tenho duas checkboxes, que quero associar de duas formas de ligação de dados ao Login-Component-TypeScript.
Este é o HTML:
<div class="checkbox">
<label>
<input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Benutername speichern
</label
></div>
e este é o componente.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']);
}
se carregar numa opção, obtenho o valor correcto no controlador (componente).
mas se eu alterar o valor de por exemplo saveUsername no componente, a opção não" consegui " o novo valor.
ngOnInit do componente.
Obrigado pela ajuda!
9 answers
Você pode remover .selected de saveUsername na sua opção de entrada, dado que o saveUsername é um booleano. em vez de [(ngModel)] Usar [checked]="saveUsername" (change)="saveUsername = !saveUsername"
Editar: Solução Correcta:
<input type="checkbox" [checked]="saveUsername" (change)="saveUsername = !saveUsername" />
Infelizmente a solução fornecida por @hakani não é uma ligação bidirecional . Ele apenas lida com a mudança de modelo unidirecional da parte interface/FrontEnd.
Em vez disso, o simples:
<input [(ngModel)]="checkboxFlag" type="checkbox"/>
Vai fazer uma ligação bidirecional para a caixa de cheques.
Depois, quando o modelo checkboxFlag é alterado da infra-estrutura ou da parte UI-voila, o checkboxFlag armazena o estado actual da opção.
Para ter a certeza que preparei o código do Plunker para apresentar o resultado. : https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0MfkSó para completar esta resposta, deverá incluir o import { FormsModule } from '@angular/forms' em app.module.ts e Adicionar à lista de importações i. e
import { FormsModule } from '@angular/forms';
[...]
@NgModule({
imports: [
[...]
FormsModule
],
[...]
})
<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">
Passar $evento como outro parâmetro e na função que podemos obter entrada é verificado ou não por $event.destino.verificado
Prefiro algo mais explícito:
Componente.html
<input #saveUserNameCheckBox
id="saveUserNameCheckBox"
type="checkbox"
[checked]="saveUsername"
(change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />
Componente.ts
public saveUsername:boolean;
public onSaveUsernameChanged(value:boolean){
this.saveUsername = value;
}
Ao usar a sintaxe <abc [(bar)]="foo"/> no angular.
<abc [bar]="foo" (barChange)="foo = $event" />
O que significa que o seu componente deve ter:
@Input() bar;
@Output() barChange = new EventEmitter();
Você pode usar algo assim para ter ligação de dados de duas vias:
<input type="checkbox" [checked]="model.propertie" (change)="model.propertie = !model.consent_obtained_ind">
Para que a opção funcione, deve seguir todos estes passos:
- importar
FormsModuleno seu módulo - Coloque a entrada dentro de uma marca
form -
A tua opinião deve ser assim:
<input name="mpf" type="checkbox" [(ngModel)]="value" />Nota: não se esqueça de colocar o nome na sua entrada.
Fiz um componente personalizado que tentou ligar de duas formas
A minha componente:
<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">
Enquanto isto não vai
<mycheckbox [(checked)]="isChecked">
Deve adicionar name="selected" atributo ao elemento input.
Por exemplo:
<div class="checkbox">
<label>
<input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Benutername speichern
</label>
</div>