文章/答案/技术大牛

发布

社区首页 >问答首页 >处理json类型的数据绑定角4

问处理json类型的数据绑定角4
EN

Stack Overflow用户

提问于 2018-07-25 03:36:42

回答 1查看 674关注 0票数 1

处理引用类型数据(例如json数据)的最佳方法是绑定到组件。例如,

<my-component [data]="jsonData"></my-component>

在.ts jsonData= {'key1':'value1','key2','value2'}的地方

现在，如果按一下按钮，我将jsonData更改为{'key1':'valueX','key2','value2'}

run将无法检测到此更改，因此不会运行ngOnChanges()，因为run只检查数据绑定更改或不作为结果视图的引用将不会被刷新。我该怎么处理呢？

我可以在ngDoCheck()中使用逻辑来刷新我的视图，但是它被多次调用。如果json很大，那么每次运行ngDoCheck时处理它可能是一项昂贵的操作。

我可以想到的一个可能的解决方案是为该组件创建一个服务，然后单击按钮，将新的json传递给该服务，服务将使用更改的数据将该事件发布到我的组件中，组件侦听服务的事件，将使用该新数据刷新视图。

是否有更简单的方法来处理绑定到组件的JSON/Array更改？

json

angular

data-binding

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-25 04:11:27

您可以在组件中为@Input属性使用setter。

截取输入属性随设置器而更改使用输入属性设置器拦截父属性的值并对其进行操作。

@Input() set data(jsondata: any) {
   this._data = jsondata;
}

有关详细信息，请参阅文档这里。

评论后的最新情况：

是的，您也可以为此实现ngOnChanges，如文档所述：

在查看多个交互输入属性时，您可能更喜欢这种方法而不是属性设置器。

请参阅以下文档中的示例，

导出类MyComponent实现OnChanges { ngOnChanges(更改：{propKey: string: SimpleChange}) { for (让propName in changes) { let changedProp = changespropName；let to = JSON.stringify(changedProp.currentValue)；if (changedProp.isFirstChange()) { console.log(Initial value of ${propName} set to ${to})；}propName{ let from = JSON.stringify(changedProp.previousValue)；console.log(${propName} changed from ${from} to ${to})；}}}

您可以分别使用previousValue和currentValue属性获取成员的旧值和新值。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51510438

复制

相似问题

问处理json类型的数据绑定角4
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问处理json类型的数据绑定角4EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问处理json类型的数据绑定角4
EN