Início / coding / Perguntas / 77484715
Accepted
Ole
Asked: 2023-11-15 09:21:13 +0800 CST

Modelo angular contendo condição booleana que não é atualizada na mudança de estado?

  • 772

Estou tentando atualizar um modelo quando uma fatia do gráfico de pizza é clicada.

Este é o modelo.

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

Aqui está uma demonstração. https://stackblitz.com/edit/stackblitz-starters-p8bxjx?file=src%2Fmain.ts,src%2Fecharts.component.ts

Quando um dos segmentos do gráfico de pizza é clicado ele emite um objeto contendo o namee valuedo segmento que foi clicado.

O maincomponente recebe isso através do ouvinte onPieSelecte define a slicepropriedade no maincomponente assim:

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

Podemos observar que o objeto está sendo recebido via log, porém o template não está sendo atualizado.

Alguma ideia?

javascript

1 respostas

  1. Best Answer

    echarts geram eventos fora do angular e, portanto, os eventos char não acionam a detecção de alterações.

    para corrigir isso, envolva o manipulador em uma execução 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);
      })
      
    });
  }
    • 1

relate perguntas