L'associazione dati non si aggiorna quando la proprietà cambia in Angular2

Question

Non riesco a capire come associare i campi al componente in modo che i campi si aggiornino quando cambio le proprietà in OnDataUpdate().

Il campo "OtherValue" ha un legame di lavoro bidirezionale per il campo di input e il campo per "Nome" visualizza "test" quando viene visualizzato il componente. Ma quando aggiorno i dati, nessuno dei campi viene aggiornato per visualizzare i dati aggiornati.

Il primo valore registrato di "this.name" non è definito (???), il secondo è corretto, ma il campo associato alla stessa proprietà non viene aggiornato.

Come può il componente fornire il valore iniziale per il campo nome, ma quando viene eseguito l'aggiornamento dei dati, la proprietà nome viene improvvisamente indefinita?

stuff.component.ts

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

export class BuildingInfoComponent { 
    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" /> 

Answer 1

Il contesto this si perde se lo si passa così nella funzione subscribe(). È possibile risolvere questo in diversi modi:

utilizzando bind

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

utilizzando una funzione di freccia anonimo involucro

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

cambiamento della dichiarazione della funzione

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

Answer 2

Passando metodo riferimenti così rompe il this riferimento

dataservice.subscribe(this.OnDataUpdate); 

uso questo invece:

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

Utilizzando ()=> (arrow function)this viene mantenuto e continua a fare riferimento all'istanza di classe corrente.

Answer 3

Stai perdendo il contesto this, per mantenere il contesto è possibile utilizzare bind.

dataservice.subscribe(this.OnDataUpdate.bind(this));