angular - ngx-charts : On click pie chart slice, 单击的切片应该变为事件状态

Question

我正在使用 ngx-chart 5.3.1 和 angular 4.1.1。单击时，我想突出显示饼图中的特定部分。

在页面加载时，我给出了静态数组

this.activeEntries = [{"name" : "users" , value:4}];

它在页面加载时正确突出显示特定切片。单击饼图的一部分时，我尝试将 activeEntries 设置为不突出显示饼图的特定部分。我需要突出显示特定的点击切片。

组件

export class PieChartComponent implements OnInit {

  @Input() data: SingleChartData[] = this.data ? this.data : [];

  @Input() chartInfo : any;


  private pieChartInfo : PieChart;
  private activeEntries : any[] = [{name:'users',value:4}];

  constructor() { }

  ngOnInit() {
    console.log(this.activeEntries);
    this.chartInfo = this.chartInfo === undefined ? {} : this.chartInfo;
    this.pieChartInfo = new PieChart(this.chartInfo);
  }

  onSelect(event) {
    this.activeEntries = [];
    this.activeEntries.push(event);
  }

模板

<ngx-charts-pie-chart [scheme]="pieChartInfo.colorScheme" 
  [results]="data" 
  [legend]="pieChartInfo.showLegend" 
  [explodeSlices]="pieChartInfo.explodeSlices" 
  [labels]="pieChartInfo.showLabels" 
  [doughnut]="pieChartInfo.doughnut" 
  [gradient]="pieChartInfo.gradient" 
  (select)="onSelect($event)" 
  [view]="pieChartInfo.view"  
  [activeEntries]="activeEntries" >
</ngx-charts-pie-chart>

Answer 1

我在这里看到的是您在添加事件条目后不会触发更改检测。

onSelect(event) {
  this.activeEntries = [];
  this.activeEntries.push(event);
}

this.activeEntries.push() 不会触发更改检测，因为引用是相同的，您应该尝试:

onSelect(event) {
  this.activeEntries = [{...event}];
}