typescript 当 Angular2 中的属性更改时，数据绑定不会更新

Data binding not updating when property changes in Angular2

提问by Kristoffer Berge

I can't figure out how to bind the fields to the component so that the fields update when i change the properties in OnDataUpdate().

我不知道如何将字段绑定到组件，以便在我更改 OnDataUpdate() 中的属性时更新字段。

The field "OtherValue" has a working two way binding to the input-field and the field for "Name" displayes "test" when the component is displayed. But when i refresh the data, none of the fields are updated to display the updated data.

字段“OtherValue”有一个与输入字段绑定的工作方式，当显示组件时，“名称”字段显示“测试”。但是当我刷新数据时，没有任何字段被更新以显示更新的数据。

The first logged value of "this.name" is undefined(???), the second is correct, but the field bound to the same property does not update.

“this.name”的第一个记录值是 undefined(???)，第二个是正确的，但是绑定到相同属性的字段没有更新。

How can the component provide the initial value for the name-field, but when the data update is trigged, the name-property is suddenly undefined?

组件如何为name-field提供初始值，但是触发数据更新时，name-property突然undefined？

stuff.component.ts

东西.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

东西.component.html

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

采纳答案by Poul Kruijt

The thiscontext is lost if you pass it like that in the subscribe()function. You can fix this in several ways:

该this如果你传递这样的背景下，失去subscribe()功能。您可以通过多种方式解决此问题：

by using bind

通过使用绑定

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

by using an anonymous arrow function wrapper

通过使用匿名箭头函数包装器

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

change the declaration of the function

更改函数的声明

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

回答by Günter Z?chbauer

Passing method references this way breaks the thisreference

以这种方式传递方法引用会破坏this引用

dataservice.subscribe(this.OnDataUpdate);

use this instead:

改用这个：

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

By using ()=>(arrow function)thisis retained and keeps referring to the current class instance.

通过使用()=>（箭头函数）this保留并不断引用当前类实例。

回答by Maxian Nicu

You are losing thiscontext, to keep context you can use bind.

您正在丢失this上下文，为了保持上下文，您可以使用bind。

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