Angular2中的属性更改时数据绑定不更新

Posted 2023-03-13

【中文标题】Angular2中的属性更改时数据绑定不更新

【英文标题】：Data binding not updating when property changes in Angular2

【发布时间】：2016-09-23 03:56:11

【问题描述】：

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

“OtherValue”字段与输入字段有两种有效的绑定方式，“Name”字段在显示组件时显示“test”。但是当我刷新数据时，没有任何字段被更新以显示更新的数据。

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

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

stuff.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

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

【参考方案1】：

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

dataservice.subscribe(this.OnDataUpdate);

改用这个：

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

通过使用()=> (arrow function) this 被保留并继续引用当前类实例。

【参考方案2】：

如果您像在subscribe() 函数中那样传递this 上下文，它就会丢失。您可以通过多种方式解决此问题：

通过使用绑定

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

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

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

改变函数的声明

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

【讨论】：

如果不是函数调用而是赋值怎么办？ @pierreduc

那么你应该将该赋值封装在一个匿名箭头函数中

【参考方案3】：

您正在丢失this 上下文，要保留上下文，您可以使用bind。

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