Angular2中的一种数据绑定方式

Question

我得到了以下HTML

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

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

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

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

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

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

Answer 1

• 如果你使用[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 2

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

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

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

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

Answer 3

从角度官方文件: