【问题标题】:Angular 2 two way data binding not workingAngular 2双向数据绑定不起作用
【发布时间】:2017-12-15 19:21:55
【问题描述】:

我无法让自定义双向数据绑定在 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/

编辑:这是一个与可能重复的问题不同的问题,因为这个问题不会产生任何错误,而且它是一个更简单和本地化的问题,与双向绑定的格式有关。

【问题讨论】:

标签: angular


【解决方案1】:

这是因为 check_send 必须是 testChange,因为它是在文档中编写的,Angular 使用 xxxChange 语法对代码进行去糖。

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

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

this.testChange.emit(this.test);

固定堆栈闪电战:https://stackblitz.com/edit/angular-ivy-165fvb?file=src%2Fapp%2Fapp.component.ts

【讨论】:

  • 好答案。对于像我这样的人,我认为文档可能会更清晰一些(我认为这是主观的,我也不太喜欢 camelCase)。您可能会认为他们可以在黄色香蕉块下方使用红色重要块来表示这种格式很重要。
  • @DanielJudd 我绝对同意
  • 上面的 plunker 没有在今天的 chrome/firefox 浏览器中运行。我的 stackblitz 复制似乎是相同的代码,但不支持 2 路绑定的 box 表示法中的香蕉。子组件中的更改不会发送回父组件。将符号拆分为事件绑定有效。您是否有任何线索为什么我的代码不起作用?请分叉并分享您的链接,谢谢。 stackblitz.com/edit/…
  • 我将代码更新为 stackblitz,但我不明白您在 stackblitz 中要做什么。你能详细说明一下吗?我尝试在子组件中单击“设置/更改值”,它似乎正在工作
猜你喜欢
  • 1970-01-01
  • 2017-06-13
  • 2020-06-28
  • 2017-10-20
  • 1970-01-01
  • 1970-01-01
  • 2015-10-15
相关资源
最近更新 更多