web-dev-qa-db-fra.com

La liaison de données ne se met pas à jour lorsque la propriété change dans Angular2

Je n'arrive pas à comprendre comment lier les champs au composant afin qu'ils soient mis à jour lorsque je modifie les propriétés dans OnDataUpdate (). 

Le champ "OtherValue" a une liaison bidirectionnelle de travail au champ d'entrée et le champ pour "Nom" affiche "test" lorsque le composant est affiché. Mais lorsque j'actualise les données, aucun des champs n'est mis à jour pour afficher les données mises à jour. 

La première valeur enregistrée de "this.name" est indéfinie (???), la seconde est correcte, mais le champ lié à la même propriété ne se met pas à jour.

Comment le composant peut-il fournir la valeur initiale du champ name, mais lorsque la mise à jour des données est déclenchée, la propriété name est soudain indéfinie?

stuff.component.ts

@Component({
    moduleId: __moduleName,
    selector: 'stuff',
    templateUrl: 'stuff.component.html'
})

export class StuffComponent {
    Name: string = "test";
    OtherValue: string;

    constructor(private dataservice: DataSeriesService) {
        dataservice.subscribe(this.OnDataUpdate);
    }

    OnDataUpdate(data: any) {
        console.log(this.Name);
        this.Name = data.name;
        this.OtherValue = data.otherValue;
        console.log(this.Name);
}

stuff.component.html

<table>
    <tr>
        <th>Name</th>
        <td>{{Name}}</td>
    </tr>
    <tr>
        <th>Other</th>
        <td>{{OtherValue}}</td>
    </tr>
</table>
<input [(ngModel)]="OtherValue" />
htmltypescriptangular
12
Kristoffer Berge

Le contexte this est perdu si vous le transmettez comme cela dans la fonction subscribe(). Vous pouvez résoudre ce problème de plusieurs manières:

en utilisant bind 

constructor(private dataservice: DataSeriesService) {
    dataservice.subscribe(this.OnDataUpdate.bind(this));
}

en utilisant un wrapper de fonction de flèche anonyme 

constructor(private dataservice: DataSeriesService) {
    dataservice.subscribe((data : any) => {
        this.OnDataUpdate(data);
    });
}

change la déclaration de la fonction 

OnDataUpdate = (data: any) : void => {
      console.log(this.Name);
      this.Name = data.name;
      this.OtherValue = data.otherValue;
      console.log(this.Name);
}
11
PierreDuc

Passer des références de méthode de cette façon rompt la référence this

dataservice.subscribe(this.OnDataUpdate);

utilisez ceci à la place:

dataservice.subscribe((value) => this.OnDataUpdate(value));

En utilisant ()=> (fonction de flèche)this est conservé et continue à faire référence à l'instance de classe actuelle.

2
Günter Zöchbauer

Vous perdez le contexte this. Pour conserver le contexte, vous pouvez utiliser bind .

dataservice.subscribe(this.OnDataUpdate.bind(this));
0
Maxian Nicu