web-dev-qa-db-fra.com

Gérer le changement de modèle dans Angular 5 Component (Two-way-binding)

Je travaille actuellement sur une application angular 5. J'essaie de modifier une variable membre de mon composant dans une entrée sur la vue et j'utilise la variable dans mon composant après le changement.

Ma structure est la suivante:

Dossier: my-test

  • my-test.component.html
  • my-test.component.css
  • my-test.component.ts

1) my-test.component.html: 

<input [(ngModel)]="hello" />

2) my-test.component.ts: 

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}

Malheureusement, cette solution ne fonctionne pas. Savez-vous comment changer la variable d'un composant sur l'interface utilisateur et l'utiliser ensuite dans le composant?

Je vous remercie!!

javascripthtmlangularangular-componentstwo-way-binding
8
TimHorton

vous pouvez utiliser la directive (ngModelChange)

    <input [(ngModel)]="hello" (ngModelChange)="myFunction()"/>

code:

    import { Component } from '@angular/core';

    @Component({
        selector: 'my-test',
        templateUrl: './my-test.component.html',
        styleUrls: ['./my-test.component.css']
    })
    export class MyTestComponent {
        hello: string = "bonjour";

        constructor() { }

        myFunction() {
            console.log(this.hello);
        }
    }
7
Matt

Utilisez la banane dans la syntaxe de la boîte [(ngModel)] pour obtenir la liaison de données bidirectionnelle pour votre variable (bonjour), si vous voulez simplement utiliser la variable bonjour dans une autre méthode à l'intérieur du composant, il n'est pas nécessaire de regarder la valeur changer manuellement, car ngModel gardera la propriété (bonjour) et affichera (entrée) en synchronisation, donc les méthodes utilisant la propriété 'bonjour' obtiendront toujours la valeur mise à jour.

Mais si vous voulez faire quelque chose à chaque fois que la valeur change, utilisez alors la propriété ngModelChange pour écouter le changement de valeur de la propriété.

<input type="text" [(ngModel)]="hello">
{{hello}}

écouter le changement de valeur de la propriété

<input type="text" [(ngModel)]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will also get updated

<input type="text" [ngModel]="hello" (ngModelChange)="executeCallback($event)">
{{hello}} //will not get updated
1
Nikx Fabrizio

Vous pouvez utiliser (ngModelChange)=functionToCall($event) Pour appeler la fonction lors du changement de modèle et obtenir une valeur mise à jour. C'est assez utile, et vous pouvez l'utiliser avec une [(ngModel)] régulière sur le même élément. Dans ce cas, vous pouvez utiliser simplement [ngModel] Au lieu de la fonction [(ngModel)] régulière et définir une nouvelle valeur sur variable à partir de la fonction functionToCall, mais cela dépend de vos besoins. Voici une petite démo (consultez la console pour voir les valeurs mises à jour):

https://stackblitz.com/edit/angular4-rnvmhm?file=app%2Fapp.component.html

1
Commercial Suicide