Question

我得到以下html

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

我希望数据和列属性是不可变的。网格应该只显示它。但是在排序或过滤的情况下，数据会发生变化，至少是顺序。

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

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

原件变了。但我认为[数据]只是数据绑定的一种方式。

有人能指出我正确的方向，为什么会发生这种情况以及如何省略它。我来自React，这将非常直接。

Answer 1

但是你正在使用一个带有输入@Input()属性的子组件，这会跳出线条;-)符号不是它看起来的样子，因为它总是被绑定。

<sub-component [prop]="myObj"></sub-component>

因此，如果您更改子组件中的myObj，它将被绑定：

ngOnInit() {
    this.myObj = this.myObj.push(this.newObj);
}

您可以使用myObj的本地副本来阻止绑定。

如果您需要模型更新，可以使用@Output()作为事件推送它：

<sub-component [prop]="myObj" (update)="myObj = $event"></sub-component>

Answer 2

你是对的，语法[target]=expression是一种单向数据绑定，但我认为你误解了单向数据绑定的想法。

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

另一方面，您可以找到从视图目标到数据源的单向数据绑定，其语法为(target)=expression，用于将事件传递回组件。

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

Answer 3

来自有棱角的官方文件：

Answer 4

首先，您需要了解数据绑定在Angular中的含义是什么

什么是数据绑定？

“数据绑定是嵌入到模板中的表达式，并经过评估以在HTML文档中生成动态内容。数据绑定提供HTML文档中的HTML元素与模板文件中的HTML元素之间的链接以及应用程序中的数据和代码。” （from Pro Angular book）

[目标]：表达式

方括号表示单向数据绑定，其中数据从表达式流向目标。单向数据绑定仅在一个方向上进行，该数据从组件流向html模板文件。

{{expression}}

字符串插值绑定，用于将表达式结果包含在宿主元素的文本内容中。

（目标）=“ expr”

圆括号表示单向绑定，其中数据从表达式流向目标，而到目标。这是用于处理事件的绑定。

[（target）] =“ expr”

这种括号组合称为盒装香蕉 –表示双向绑定，其中数据在目标和目标之间双向流动表达式指定的目的地。