La liaison de données pas de mise à jour lorsque des changements de propriété dans Angular2

Je ne peux pas comprendre comment lier les champs de la composante, de sorte que la mise à jour des champs quand j'ai changer les propriétés OnDataUpdate().

Le champ "OtherValue" a une liaison bidirectionnelle à l'entrée de champ et le champ "Nom" affiche "test" lorsque le composant est affiché. Mais quand je l'actualisation des données, aucun des champs sont mis à jour pour afficher la mise à jour des données.

La première connexion de la valeur de la "ce.le nom" n'est pas défini(???), la seconde est correct, mais le domaine lié à la même propriété n'est pas à jour.

Comment le composant de fournir de la valeur initiale pour le nom de domaine, mais lors de la mise à jour des données est déclenché, le nom de la propriété est soudainement pas défini?

choses.composante.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" />

InformationsquelleAutor Kristoffer Berge | 2016-05-25

La this contexte est perdu si vous passer comme ça dans la subscribe() fonction. Vous pouvez résoudre ce problème de plusieurs façons:

en utilisant le lier

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

à l'aide d'un anonyme flèche fonction wrapper

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

modification de 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);
}

Si ce n'est pas une invocation de la fonction et est une affectation de la valeur?? @pierreduc
Ensuite, vous devez envelopper cette affectation dans l'anonymat de la flèche de la fonction

InformationsquelleAutor PierreDuc

2

Méthode de passage de références de cette façon, les sauts de la this référence
```
dataservice.subscribe(this.OnDataUpdate);
```
utiliser ce lieu:
```
dataservice.subscribe((value) => this.OnDataUpdate(value));
```
En utilisant ()=> (flèche fonction) this est conservé, et le garde en se référant à la classe en cours d'instance.

InformationsquelleAutor Günter Zöchbauer
0

Vous sont en train de perdre this contexte, pour garder contexte, vous pouvez utiliser lier.
```
dataservice.subscribe(this.OnDataUpdate.bind(this));
```
InformationsquelleAutor Maxian Nicu

Vous devez vous connecter pour publier un commentaire.