更改 Plotly 条形图条形颜色未反映在有角度的 UI 中

Question

使用以下函数更新plotly-plot条形图颜色，颜色变化未反映在角度用户界面中。我该如何解决这个问题？

colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    this.graph.layout.colorway.forEach((item, i) => {
      if (item == $event.currentBarData.marker.color) {
        this.graph.layout.colorway[i] = $event.data;
      }
    });
    this.cdRef.detectChanges();
  }

<plotly-plot
    [divId]="graph.selectedGraph.name"
    [data]="graph.selectedGraph.data"
    [config]="graph.selectedGraph.config"
    [layout]="layout"
    (relayout)="draggedShape($event)"
    [ngClass]="{ 'single-data': graph.data && graph.data.length === 1 }"
    #plotlyPlot
  >
  </plotly-plot>

Answer 1

尝试使用

layout

更新

object de-structuring

的引用来创建新的数组引用，这可能会导致组件刷新！因为输入更改时会触发

ngOnChanges

！

  colorChangeEvent($event) {
    console.log('currentGraph', this.graph);
    console.log('changed colors', $event);
    let changed = false;
    this.graph.layout.colorway.forEach((item, i) => {
      if (item == $event.currentBarData.marker.color) {
        changed = true;
        this.layout.colorway[i] = $event.data;
      }
    });
    if(changed) {
        this.layout = {...this.layout}; // <- creates a new reference!
    }
    this.cdRef.detectChanges();
  }