Ràng buộc dữ liệu không cập nhật khi thay đổi thuộc tính trong Angular2

Question

Tôi không thể tìm ra cách liên kết các trường với thành phần sao cho các trường cập nhật khi tôi thay đổi các thuộc tính trong OnDataUpdate().

Trường "OtherValue" có liên kết hai chiều hoạt động với trường đầu vào và trường cho "Tên" hiển thị "kiểm tra" khi thành phần được hiển thị. Nhưng khi tôi làm mới dữ liệu, không có trường nào được cập nhật để hiển thị dữ liệu cập nhật.

Giá trị được ghi nhật ký đầu tiên của "this.name" là không xác định (???), giá trị thứ hai là chính xác, nhưng trường được liên kết với cùng thuộc tính không cập nhật.

Làm cách nào để thành phần cung cấp giá trị ban đầu cho trường tên, nhưng khi cập nhật dữ liệu được cắt xén, tên thuộc tính đột nhiên không xác định?

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

Các bối cảnh this bị mất nếu bạn vượt qua nó như thế trong hàm subscribe(). Bạn có thể khắc phục điều này bằng nhiều cách:

bằng cách sử dụng ràng buộc

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

bằng cách sử dụng một ẩn danh mũi tên chức năng bao bọc

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

thay đổi phần khai báo của hàm

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

Answer 2

Đi qua tài liệu tham khảo phương pháp theo cách này phá vỡ this tham khảo

dataservice.subscribe(this.OnDataUpdate); 

sử dụng này để thay thế:

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

Bằng cách sử dụng ()=> (arrow function)this được giữ lại và tiếp tục tham chiếu đến cá thể lớp hiện tại.

Answer 3

Bạn đang mất this ngữ cảnh, để giữ ngữ cảnh, bạn có thể sử dụng bind.

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