2017-07-11 135 views
2

我无法在Angular 2中使用自定义双向数据绑定工具。Docs表明,盒子模型中的香蕉 - [()]只是合成糖,但是在我的例子这样不起作用,而较长方法的工作原理:Angular 2双向数据绑定不起作用

<child-component [(test)]="check">This child updates only itself</child-component> 
<child-component [test]="check" (check_send)="check=$event">This child updates all</child-component> 

的@Output事件不会改变在一个盒子模型(第一行)在香蕉父值。 作为第二行工作,我没有看到我做错了什么。 下面是该文档的链接:https://angular.io/guide/template-syntax#two-way-binding---

这里是我创造展示此行为的plunker:https://embed.plnkr.co/eTfkQmRfBRxeKCEpGdzh/

编辑:这是一个不同的问题可能重复的,因为这个问题不会产生任何错误,再加上它是一个更简单和局限性的双向绑定格式化问题。

+0

的可能的复制[?Angular2 - 上的部件变量/组件类属性双向数据绑定](https://stackoverflow.com/questions/ 35639650/angular2-two-way-databinding-on-a-component-variable-component-class-propert) – HaveSpacesuit

回答

2

这是因为check_send需要为testChange,因为它是在文档中编写的,Angular de-sugars使用xxxChange语法进行编码。

<child-component [test]="check" (testChange)="check=$event">This child updates all</child-component> 

@Output() testChange = new EventEmitter<number>(); 

this.testChange.emit(this.test); 

固定plunker:https://plnkr.co/edit/zGupQPkS6MoV3xMQefxN?p=info

+0

好的答案。我认为,对于像我这样的人来说,文档可能会更清晰一些(我认为这是主观的,也不太喜欢camelCase)。你会认为他们可以使用黄色香蕉块下面的一个红色重要块来表示这种格式很重要。 –

+0

@DanielJudd我绝对同意 – echonax