包含布尔条件的 Angular 模板在状态更改时不更新？-解网

问：

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

这是模板。

    <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

单击其中一个饼图段时，它会发出一个对象，其中包含所单击段的和。namevalue

该组件通过侦听器接收此消息，并在组件上设置属性，如下所示：mainonPieSelectslicemain

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

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

有什么想法吗？

JavaScript HTML Angular TypeScript echarts

 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);
      })
      
    });
  }

包含布尔条件的 Angular 模板在状态更改时不更新？

Angular template containing boolean condition not updating on state change?

评论

评论