angular - Angular2 中的一种数据绑定(bind)方式

Question

我得到了下面的html

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

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

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

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

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

有人能给我指明正确的方向，说明为什么会发生这种情况，以及我该如何忽略它。我来自 React，在那里这会非常简单。

Answer 1

• 如果您使用 [ngModel]、[value]、{{ param }} 等，您有单向绑定(bind)、模型查看，
• 如果你使用(ngModelChange)你有单向绑定(bind)， View 到模型，
• 如果您使用[(ngModel)]，您有两种绑定(bind)方式。

但您使用的是带有输入 @Input() 属性的子组件，这会跳出界线 ;-) 符号并不是它看起来的样子，因为它始终是绑定(bind)的。

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

因此，如果您更改子组件中的 myObj，它将被绑定(bind):

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

您可以使用 myObj 的本地副本来防止绑定(bind)。

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

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