代码之家 › 专栏 › 技术社区 › Ole

包含布尔条件的角度模板是否在状态更改时不更新?

echarts typescript angular html javascript

0

Ole · 技术社区 · 2 年前

单击饼图切片时,我正在尝试更新模板。

这就是模板。

    <h1>{{slice && slice.name}}</h1>
    <h1>{{slice && slice.value}}</h1>

这是一个演示。 https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts

当单击其中一个饼图片段时,它会发出一个包含 name 和 value 的片段。

这个 main 组件通过侦听器接收此消息 onPieSelect 并设置 slice 上的属性 主要的 组件如下:

  onPieSelect(e: any) {
    console.log('slice clicked', e);
    this.slice = e;
  }

我们可以看到,对象是通过日志接收的,但模板没有更新。

有什么想法吗?

1 回复 | 直到 2 年前

1

Andrei 2 年前

echarts在angular之外生成事件,因此,char事件不会触发更改检测。

修复将处理程序包装到ngzone运行中的问题

 ngZone = inject(NgZone);
 ...
 onChartInit(echarts: any) {
    let self = this;
    this.echartsIntance = echarts;
    this.echartsIntance.on('click',  (event: any) => {
      this.ngZone.run(() => {
    // Print name in console
        console.log('Event Name', event.name);
        console.log('Event Value', event.value);
        console.log('Event Value', event.color.colorStops[0].color);
        const pieData: any = { name: event.name, value: event.value };
        self.onPieSliceSelect.emit(pieData);
      })
      
    });
  }