Angular2中的一种数据绑定方式

Question

我得到了以下HTML

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

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

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

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

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

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

Answer 1

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

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

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

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

Answer 2

• 如果你使用[ngModel]，[value]，{{ param }}等你有单向绑定，模型来查看，
• 如果你使用(ngModelChange)你有单向绑定，查看模型，
• 如果你使用[(ngModel)]你有双向绑定。

但是你正在使用带有输入@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 3

从角度官方文件：

Answer 4

首先，您需要了解Angular中数据绑定的含义？

什么是数据绑定？

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

[目标]：表达

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

{{表达}}

字符串插值绑定，用于包含表达式，导致主机元素的文本内容。

（目标）=“表达”

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

[（目标）] =“快递”

括号的这种组合 - 称为“盒中香蕉” - 表示双向绑定，其中数据在目标和表达式指定的目标之间的两个方向上流动。