javascript - 动态创建的组件在模型更改时未绑定(bind)到模型

标签 javascript angular angular7

我的目标是向动态创建的组件的 item$ 属性发出新值,将组件状态恢复为存储在对象中的默认状态。但很明显,组件没有接受模型更改。

每次发出新值时,我都尝试在组件上运行更改检测。但仍然没有获得值(value)。

我已经在https://stackblitz.com/edit/angular-tyhfku 中重现了这个问题。 .

在上面的代码中,HelloComponent 是可重用组件,而 HeroComponent 是托管 HelloComponent 的动态组件(抱歉命名)。在 AppComponent 上,我有一个 onclick 方法,它在每次点击时发出新的值。您还可以更改 DOM 上每个项目的状态。但是我想在每个新值上恢复 HeroComponent 的状态,我试图在 Subscription 上完成但不起作用

最佳答案

这与动态创建的组件无关 - 尝试将其更改为标准方式,您仍然会遇到同样的问题。它是关于如何将简单值传递给 section/hello 组件,如何更改它们以及 Angular 中的更改检测机制如何工作。更改 SectionComponent 中的值后,从 HeroComponent 的 Angular 来看,实际上没有任何变化,SectionComponents 的输入值是相同的。尝试向 SectionComponent 添加另一个简单的数字 Input 属性,在 HeroComponent 中更改它,你会发现 onChanges 工作正常: https://stackblitz.com/edit/angular-za4mkd

我现在不知道你想要什么,所以我不能告诉你正确的编码方式,但也许你应该考虑使用 Control Value Accessor(如果这必须是某种形式的复选框?)。 此外,您还应该记住,对于对象(如数据结构),Angular 仅在引用更改时才会看到更改(您可以使用扩展运算符创建数据结构的新实例)。

关于javascript - 动态创建的组件在模型更改时未绑定(bind)到模型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56173409/

相关文章:

javascript - 在 angularjs 中遍历字符串化的 json 数据返回未定义

javascript - jquery ui 两个draggables冲突

angular - 如何在不重构的情况下处理 Angular 2+ (7) 路由更改?

Angular 7 测试 - 异步函数调用 + async..await

angular - 在带有模板的 Angular ng-bootstrap 模式中,关闭和关闭按钮不起作用

javascript - 如何将 iScroll4 与 SwipeView 一起使用?

css - Angular 动态 css #

javascript - Angular 绑定(bind)到 View 上的函数会导致对数据服务的无限调用

javascript - 我们如何从express session 中读取动态变化的值并在 Angular 前端显示该值

javascript - 如果找到,按定义的值排序