Angular 服务未更新组件 html 元素答案

【问题标题】：Angular service not updating component html elementAngular 服务未更新组件 html 元素
【发布时间】：2022-01-18 21:50:14
【问题描述】：

我在 Angular 服务的对象中有一个属性，该属性绑定到组件的 html 中的文本字段。

当服务更新属性时，新值不会显示在 html 元素中，直到我单击该元素。

我无法弄清楚为什么新值没有立即显示在文本字段中，而无需单击元素以获取新值。

更新函数中的console.log消息显示对象已正确更新，只是在单击元素之前数据没有进入表单字段。

代码如下：

parent.component.html

<input [(ngModel)]="service.serviceObj.data" type="text" />

service.service.ts

public serviceObj = {} as any;

...

updateObj() {
    this.serviceObj.data = 'new value';
    console.log('this.serviceObj = ', this.serviceObj);
}

...

【问题讨论】：

如何在parent.component.ts中调用updateObj()？我们需要更多代码来找出您的问题……

标签： javascript angular typescript ngmodel

【解决方案1】：

您的输入是引用：

service.selectedMarker.data

但是你的设置：

this.serviceObj.data = 'new value'

serviceObj 与 selectedMarker。你是故意的吗？

<input [(ngModel)]="service.serviceObj.data" type="text" />

【讨论】：

抱歉，打错了。我刚刚用 serviceObj 更新了 OP。

【解决方案2】：

您总是可以像这样复制对象：

 const obj= JSON.parse(JSON.stringify(<objToCopy>));

然后在 obj 中进行突变并将服务属性分配给突变的副本 obj ("this.yourObj = obj")

【讨论】：