聊天未在图表4中与angular 10一起处理

view.html

视图将根据每次筛选更新数据

<div *ngFor="let data of chart_report; let i=index" style="width:33.33%" (click)="viewsummary(i)">
    <app-pie-chart [data]="data"></app-pie-chart>
</div>

如果我将应用过滤器饼图组件，则触发ngondestory方法，但未处理图表

---

我无法找到我的错误。

我也有同样的问题，我在将angular/material的BrowserAnimationsModule添加到应用程序模块导入时发现了这一问题。你还有其他见解吗？

<div>
     <div [id]="id" style="width: 100%; height:200px" class="mt-1"></div>
</div>

import { Component, Input, OnInit,SimpleChange } from '@angular/core';

// amCharts imports
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';

interface data{
  aborted: string;
  dut_build_version: string;
  dut_name: string;
  failed: string;
  passed: string;
  suite: string;
  tested: string;
  totalcase:string;
  suiteid:number;
}
@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.scss']
})

export class PieChartComponent implements OnInit {

  @Input() data:data;
  id:string;

  chart: am4charts.PieChart;
  constructor() { 
    
  }
  ngOnChanges(changes: SimpleChange): void {
    
  }
  ngOnInit(): void {
    this.id=`${this.data.dut_name}-${this.data.dut_build_version}-${this.data.suite}`;
    
  }
  ngAfterViewInit(): void {
    
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create(this.id, am4charts.PieChart);
    // Add data
    chart.data = [{
      "status":"Passed",
      "value": this.data.passed,
      "color": am4core.color("#235789")
    }, {
      "status": "Failed",
      "value": this.data.failed,
      "color": am4core.color("#ED1C24")
    }, {
      "status": "Aborted",
      "value": this.data.aborted,
      "color": am4core.color("#F1D302")
    },{
      "status": "To be tested",
      "value": parseInt(this.data.totalcase) - (parseInt(this.data.passed) + parseInt(this.data.failed) + parseInt(this.data.aborted)),
      "color": am4core.color("#c7da2b")
    }];

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "value";
    pieSeries.dataFields.category = "status";
    pieSeries.slices.template.propertyFields.fill = "color";
    pieSeries.ticks.template.disabled = true;
    pieSeries.labels.template.disabled = true;
    chart.legend = new am4charts.Legend();
    chart.legend.useDefaultMarker = true;
    let markerTemplate = chart.legend.markers.template;
    markerTemplate.width = 10;
    markerTemplate.height = 10;
    markerTemplate.stroke= am4core.color("#ccc");
    markerTemplate.strokeWidth = 2;
    markerTemplate.strokeOpacity = 1;
    this.chart=chart;

  }
  ngOnDestroy(){
    
    if (this.chart) {
      console.log("Enter chart dispose");
      this.chart.dispose();
    }
   
  }

}