Powiązanie danych nie aktualizuje się, gdy zmiany właściwości w Angular2

Question

Nie mogę dowiedzieć się, jak powiązać pola z komponentem, aby pola były aktualizowane, gdy zmienię właściwości w OnDataUpdate().

Pole "OtherValue" ma działający dwukierunkowo wiązanie do pola wejściowego, a pole "Name" wyświetla "test", gdy komponent jest wyświetlany. Ale po odświeżeniu danych żadne z pól nie jest aktualizowane w celu wyświetlenia zaktualizowanych danych.

Pierwsza zarejestrowana wartość "this.name" jest niezdefiniowana (???), druga jest prawidłowa, ale pole powiązane z tą samą właściwością nie jest aktualizowane.

W jaki sposób komponent może dostarczyć wartość początkową dla pola nazwy, ale po wyzwoleniu aktualizacji danych właściwość name jest nagle niezdefiniowana?

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

Kontekst this zostanie utracony, jeśli przekażesz go w ten sposób w funkcji subscribe(). Można rozwiązać ten problem na kilka sposobów:

za pomocą wiązania

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

za pomocą funkcji anonimowej strzałka opakowanie

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

zmienić deklaracja funkcji

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

Answer 2

Przechodząc odniesienia Sposób ten sposób przerywa this odniesienia

dataservice.subscribe(this.OnDataUpdate); 

stosowany zamiast:

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

Użycie ()=> (arrow function)this zostaje zachowane i odnosi się do bieżącej instancji klasy.

Answer 3

Tracisz kontekst this, aby zachować kontekst można użyć bind.

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