Tengo un componente angular que es un grid designer donde puedo editar celdas. Para que la multiselección funcione necesito que el selectedContent añada los datos del contenido seleccionado como un array con label y value, de la misma forma que el contentOptions, porque si no, actualmente, no funciona.
Dame el código para realizarlo:
import { Component, Input, OnInit } from '@angular/core';
import * as echarts from 'echarts';
import {KpiService} from '../../../services/kpi.services';
import {barModel} from '../../../models/bar.model';
import { _MAT_INK_BAR_POSITIONER } from '@angular/material/tabs';

@Component({
  selector: 'app-kpi-bar',
  templateUrl: './kpi-bar.component.html',
  styleUrl: './kpi-bar.component.scss'
})
export class KpiBarComponent {
  constructor(
    private kpiService: KpiService
  ){}
  @Input() kpiNumber: number | undefined;
  chartOptions: any;

  private KPIData : any;
  private chartData : any;
  private chartProperties: barModel = new barModel();
  
  private getKPIdata() {
    var filtros = {
    "fechaDesde": "2023-01-01",
    "fechaHasta": "2023-12-31",
    "listKpi": [this.kpiNumber]
    };
    
    //Obtenemos los datos del KPI
    this.kpiService.getKPI(filtros).subscribe( res=> {
      complete: {
        this.KPIData = res;
        this.chartProperties = this.getPropiedadesEcharts();
        //console.log(this.chartProperties);
        if(this.chartProperties.seriesLineCategoria != null) {
          this.chartData = res.data.table;
        } else {
          this.chartData = this.agruparDatos(res.data.table,
                                            this.chartProperties.seriesCategoria,
                                            this.chartProperties.seriesDatos,
                                            this.chartProperties.agrupadoNumerico);
        }
        //console.log(res);
        //console.log(this.chartData);
        this.buildChart();
      }
    });
}
private getPropiedadesEcharts() : barModel {
  var bm = new barModel(
    this.KPIData.nombre,
    this.KPIData.propiedadesEcharts.seriesCategoria,
    this.KPIData.propiedadesEcharts.seriesDatos,
    this.KPIData.propiedadesEcharts.seriesColor,
    this.intToboolean(this.KPIData.propiedadesEcharts.seriesShowLabel),
    parseFloat(this.KPIData.propiedadesEcharts.seriesLabelSize),
    this.intToboolean(this.KPIData.propiedadesEcharts.agrupadoNumerico)
  );
  if(this.KPIData.propiedadesEcharts.seriesLineCategoria != null ) {
    bm.seriesLineCategoria = this.KPIData.propiedadesEcharts.seriesLineCategoria
  };
  //console.log(bm);
  return bm;
}
private agruparDatos(dataArray: Array<Record<string, any>>, agrupado: string, valor: string, numérico: boolean): Array<Record<string, any>> {
  var result: Array<Record<string, any>> = [];
  dataArray.reduce(function(resp: Record<string, any>, value: Record<string, any>) {
      if (!resp[value[agrupado]]) {
          resp[value[agrupado]] = { [agrupado]: value[agrupado], [valor]: 0 };
          result.push(resp[value[agrupado]]);
      }
      
      resp[value[agrupado]][valor] += parseFloat(value[valor]) || 0;
      return resp;
  }, {});
  if (numérico === false) {
      return result.sort((a, b) => {
          const nameA: string = a[agrupado].toString(); 
          const nameB: string = b[agrupado].toString(); 
          if (nameA < nameB) {
              return -1;
          }
          if (nameA > nameB) {
              return 1;
          }
          return 0;
      });
  } else {
      return result.sort((a, b) => a[agrupado] - b[agrupado]);
  }
}
  private intToboolean(value: number) : boolean {
    return !!+value;
  }
  private buildChart() {
    this.chartOptions = {
      grid: {
        left: 60,
        bottom: 20,
        right: 10,
        top: 10
      },
			title: {
			  text: this.chartProperties?.nombre
			},
			tooltip: {
				trigger: 'item',
				axisPointer: {
					type: 'shadow',
          shadowStyle: {
            color: "rgba(163, 46, 46, 1)",
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
          }
				},
				backgroundColor: 'rgba(0, 0, 0, 1)',
        textStyle: {
          color: 'rgba(255, 255, 255, 1)'
        },
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);',
        formatter: (c: {name: string, value: number}): string => {
          //console.log(c);
          return c.name + ' --> ' +
            c.value.toLocaleString("de-DE", {
            style: "currency", currency: 'EUR', minimumFractionDigits:0, maximumFractionDigits:0});
        }
			},
			axisPointer: {
				type: 'cross',
				label: {
				  backgroundColor: '#' + this.chartProperties?.seriesColor,
				  formatter: (c: {value: number}): string => {
            return c.value.toLocaleString("de-DE", {
                   style: "currency", currency: 'EUR', minimumFractionDigits:0, maximumFractionDigits:0});
          }
				}
			},
			xAxis: {
			  type: 'category',
			  data: this.chartData.map((row: { [x: string]: any; }) => row[this.chartProperties?.seriesCategoria]),
			  axisTick: {
				  alignWithLabel: true
			  }
			},
			yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (c: number): string => {
            return c.toLocaleString("de-DE", {
                   style: "currency", currency: 'EUR', minimumFractionDigits:0, maximumFractionDigits:0});
          }
        }
      },
			series: [
				{
				  type: 'bar',
				  data: this.chartData.map((row: { [x: string]: any; }) => row[this.chartProperties?.seriesDatos]),
				  color: '#' + this.chartProperties?.seriesColor,
				  label: {
            show: this.chartProperties?.seriesShowLabel,
            position: 'insideBottom',
            distance: 15,
            align: 'left',
            verticalAlign: 'middle',
            rotate: 90,
            formatter: (c: {value: number}): string => {
              return c.value.toLocaleString("de-DE", {
                style: "currency", currency: 'EUR', minimumFractionDigits:0, maximumFractionDigits:0});
            },
            fontSize: this.chartProperties?.seriesLabelSize,
            color: 'white'
				  }
				}
			]
		};
    if(this.chartProperties != null) {
      this.addLineSerie();
    }
  }

  private addLineSerie() {
    var series = this.chartOptions.series;
    series.push({
      type: 'line',
      data: this.chartData.map((row: {[x: string]: any; }) => row[this.chartProperties?.seriesLineCategoria]),
      lineStyle: {
        normal: {
          color: '#b66143',
          width: 3
        }
      }
    });
    this.chartOptions.series = series;
  }

  ngOnInit(): void {
    console.log("Estoy en KPI-BAR kpi number=",this.kpiNumber);
    this.getKPIdata();
  }
}