Angular2中的单向数据绑定

Angular2中的单向数据绑定,angular,Angular,我得到了下面的html <app-grid [columns]="columns" [data]="data" ></app-grid> 原版被改了。但我认为[数据]只是单向数据绑定 有没有人能给我指出正确的方向,为什么会发生这种情况,我怎么能忽略它。我来自React,这将是非常直接的。你是对的,语法[target]=expression是单向数据绑定,但我认为你误解了单向数据绑定的概念 从数据源到视图目标的单向数据绑定意味着视图中的值不会传递回组件,而对组件中表达式所

我得到了下面的html

<app-grid [columns]="columns" [data]="data" ></app-grid>
原版被改了。但我认为[数据]只是单向数据绑定


有没有人能给我指出正确的方向,为什么会发生这种情况,我怎么能忽略它。我来自React,这将是非常直接的。你是对的,语法
[target]=expression
是单向数据绑定,但我认为你误解了单向数据绑定的概念

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

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

您可以在这里的文档中找到关于Angular2数据绑定的更多信息:。

  • 如果您使用
    [ngModel]
    [value]
    {{param}}
    等。您有单向绑定,要查看的模型
  • 如果使用
    (ngModelChange)
    则具有单向绑定、视图到模型、
  • 如果使用
    [(ngModel)]
    则具有双向绑定
但是您使用的子组件带有input
@input()
属性,这不符合要求;-)符号不是它看起来的样子,因为它总是绑定的

<sub-component [prop]="myObj"></sub-component>
您可以使用myObj的本地副本来防止绑定

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

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

从角度:


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

什么是数据绑定?

“数据绑定是嵌入到模板中的表达式,经过计算可在HTML文档中生成动态内容。数据绑定提供HTML文档和模板文件中HTML元素与应用程序中的数据和代码之间的链接。”()

[目标]:表达式

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

{{expression}}

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

(目标)=“expr”

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

[(目标)]=“expr”


这种括号组合称为“盒子里的香蕉”(banana-in-a-box),表示一种双向绑定,其中数据在表达式指定的目标和目标之间双向流动。

如果希望
数据
是不可变的,当然不应该这样修改它?在子组件中,您应该创建一个带有相关修改的
数据的新数组。不能从下面的组件修改向下传递的数据。就像在反应。还是我遗漏了什么?你必须明白什么是捆绑。绑定意味着将某物绑定到其他事物。所以不管单向绑定,双向绑定,它们都是绑定的,这意味着应该有东西绑定到某个东西上。单向表示绑定是单向的(模型到视图)。双向意味着绑定是双向的(模型到视图和视图到模型)。如果您不想更改视图,您不能使用绑定(既不能单向也不能双向)。那么从模板到组件传递数据(单向)的正确方式是什么?为了完整性,请添加链接好吗?
ngOnInit() {
    this.myObj = this.myObj.push(this.newObj);
}
<sub-component [prop]="myObj" (update)="myObj = $event"></sub-component>