Angular2中的一种方法数据绑定 [英] One way data binding in Angular2

问题描述

我得到了以下html

<app-grid [columns]="columns" [data]="data" ></app-grid>

我希望data和column属性是不可变的.网格只应显示它.但是在排序或过滤的情况下，数据至少会改变顺序.

但这是我的问题.如果我访问数据数组并修改包含对象的一个​​属性.这样.

this.data[0].name = "test"

原件被更改.但是我认为[数据]仅仅是数据绑定的一种方式.

有人可以向我指出正确的方向，为什么会发生这种情况以及如何忽略它.我来自React，这很简单.

解决方案

您是正确的，语法[target]=expression是单向数据绑定的一种方法，但是我认为您误解了单向数据绑定的想法.

从数据源到视图目标的数据绑定的一种方式意味着，视图中的值不会传递回组件，而对组件中表达式的任何更改都会反映在视图中-这是一种数据绑定的方式从数据源到视图，这并不意味着它是数据绑定的一种方式.

另一方面，您可能会发现使用语法(target)=expression从视图目标到数据源的数据绑定的一种方法，该语法用于将事件传递回组件.

您可以在以下文档中找到有关Angular2数据绑定的更多信息: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax .

I got the following html

<app-grid [columns]="columns" [data]="data" ></app-grid>

I want the data and columns properties to be immutable. The Grid should only show it. But in cases of sort or filtering the data would change, at least the order.

But here is my problem. If I access the data array and modify one property of an containing object. Like this.

this.data[0].name = "test"

The original gets changed. But I thought [data] is only one way data bound.

Could somebody point me in the right direction, to why this is happening and how I can omit it. I come from React where this would be pretty straight forward.

解决方案

You are right, syntax [target]=expression is a one way data binding, but I think that you have misunderstood the idea of the one way data binding.

One way data binding from data source to the view target means that values from the view are not passed back to the component, while any changes made to the expression in the component are reflected in the view - it is one way data binding from data source to the view, what does not mean that it is one time one way data binding.

On the other hand you may find one way data binding from the view target to data source with syntax (target)=expression which is used for passing events back to the components.

You can find more about Angular2 data binding in the docs here: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax.

这篇关于Angular2中的一种方法数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！