Angular 角元素分量不'；当我从属性添加对象时不会更新

我有角元素组件（带角8），它有2个道具。当我尝试在数组中推送某个对象时，阴影根不会重新渲染它（相反，计数器是）。在组件中推送对象时，如何强制渲染

谢谢

这是组件类

导出类计数器组件实现OnInit{
@输入（）
柜台：号码；
@输入（）
图像：阵列；
构造函数（私有cdr:ChangeDetectorRef）{}
恩戈尼尼特（）{
这个计数器=0；
this.images=[]；
}
添加（）{
这个.counter++；
}
减少{
这个柜台；
}
@输入（）
addImage（）{
this.images.push（{ciccio:'piccio'}）；//无重新加载程序
this.cdr.detectChanges（）；//错误cdr为空
}
}

应用模块

从'@angular/platformBrowser'导入{BrowserModule，platformBrowser}；
从“@angular/core”导入{NgModule，Injector}；
从“./counter/counter.component”导入{CounterComponent}；
从'@angular/elements'导入{createCustomElement}；
@NGD模块({
声明：[
反元件
],
进口：[
浏览器模块
],
提供者：[]，
entryComponents:[对应组件]
})
导出类AppModule{
构造函数（专用注入器：注入器）{
}
ngDoBootstrap（）{
const el=createCustomElement（计数器组件，{injector:this.injector}）；
自定义元素。定义（'count-component'，el）；
}
}

这是组件模板

反元件
计数-->{{counter}
增加
减少
图像{{Images.length}

您可以尝试从@angular/core注入NgZone并在其中运行吗？

根据angular的文档：

我们正在开发自定义元素，这些元素可以被构建在其他框架上的web应用程序使用。Angular框架的最小、自包含版本将作为服务注入，以支持组件的更改检测和数据绑定功能。有关发展方向的更多信息，请查看此

如中所述，依赖项注入适用于角度元素中的自定义元素。因此，将

changedtectorref

注入到自定义元素中，并在对

图像

数组进行变异时调用

detectChanges（）

，如下所示：

export class CounterComponent /* ... */ {
    constructor(private cdr: ChangeDetectorRef) { }   
    /* ... */
    addImage() {
        this.images.push({ ciccio: 'piccio'});
        this.cdr.detectChanges(); // change detection will detect the change in `images` and render
    }
}

---

尝试此操作，这将实际更改组件上images属性的值，使其能够看到更改：

  @Input()
  addImage() {
    this.images = [...this.images, { ciccio: 'piccio'}]; // should render
  }

---

Plunk:

angular元素没有在componetsorry中注入ngZone，我没有得到。你是说我们不能在组件中注入ngZone吗？我们已经根据你的代码创建了一个demo（）。在向数组添加新的元素时，ui似乎正在呈现更改的数组长度。你能再解释一下你面临的问题吗。@SiddhantPatra你的演示与此无关，他使用的是角度元素（

@Angular/Elements

），它的工作原理与“普通”角度元素稍有不同。@Input（）set counter（val）{console.log（val）}将你的代码添加到stackblitz，这样每个人都可以理解并接受此错误-->无法读取的属性“detectChanges”undefined@Bonfry听起来好像

ChangeDetectorRef

实际上没有被注入。您是否创建了自定义的

计数器组件

元素？这是因为角度检测到

图像

参考的变化。不变性无疑最适合于变化检测。

  @Input()
  addImage() {
    this.images = [...this.images, { ciccio: 'piccio'}]; // should render
  }