2017-07-11 72 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