Angular asynchrony error when using a method inside a method in a component-CodePudding

I'm trying to create a graph using a library(echarts) and I have what I think is an asyncrony error. I want to use a method addSpacesToString within the method buildChartConfiguration. "(property) TitleOption.text?: string Type 'void' is not assignable to type 'string'"

What am I doing wrong? How should I do this? Many thanks in advance. May the force be with you.


         import { Component,Input,  OnInit } from '@angular/core';
        import { BehaviorSubject } from 'rxjs';
        import { graphComponent } from '../types';
        import { EChartsOption } from 'echarts';
        import { dataService} from "@uve/shared-kpis";
        import { BarGraphType} from '@company/models';
        import { datacomponent} from '../types';
        import { UnsubscribeCollector } from '@uve/shared-domain';
    
        @Component({
          selector: 'bargraph',
          templateUrl: './bargraph.component.html',
          styleUrls: ['./bargraph.component.scss']
        })
        export class BarGraphComponent implements OnInit, graphComponent {
        
          constructor(private dataService: dataService) { }
          
      
          data:BehaviourSubject<any> =  new BehaviourSubject({})
    //here I create chartOption and the method that will create its data, chartConfiguration
          chartOption: EChartsOption;
          chartConfiguration: any = {};
        
        @Input() dashboard: string;
        @Input() dashboardItem: DashboardItem;
        
        
        
         ngOnInit(): void {  
          
          this.dataService.bargraph(this.dashboard, this.dashboardItem.id).subscribe(dataEmission: BarGraph) => {
            this.data.next(dataEmission)
            console.log("bargraph data", this.data)
          });
        
          this.data.subscribe((response)=>{
            if(!response){
              return
            }
            this.buildChartConfiguration(response)
           })   
        }
        
        
        buildChartConfiguration(response:any){
    
    //Here, in 'text', shows the error. while response.barGraphValues.name returns a string (which I need to modify), when applying the method it's this.addSpacesToString it returns 'undefined'.
       
         this.chartOption =   {
            title: {
              text: this.addSpacesToString(response.barGraphValues.name),
            },
            tooltip: {},
            legend: {
              data: ['sales']
            },
            yAxis: {
              data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
            },
            xAxis: {},
         
            series: [
              {
                name: 'sales',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
               
              }
            ]   
          }
        
        
        } 
        
        
          ngOnDestroy(){
            this._uc.destroy()
          }
    }
        
        
           addSpacesToString(s:string){
          s = s.replace(/([A-Z])/g, ' $1').trim()
          console.log(s)
          }

For your reference, the html ´´´´

<div >
        <div >   
            <div echarts *ngIf="chartOption" [options]="chartOption"  >
        </div>  
    </div>
</div>

CodePudding user response：

Have you considered to first build the complete object before assigning it to this.configOptions?

let options = {
... get spaced bar name ...
};
this.chartOption = options;

in the ng-echarts there is also the [merge] attribute. This can be used to update the options dynamically. If there is asynchronous behaviour, then assign those variables via this attribute. We use it for updating the data after the creation of the chart.

CodePudding user response：

I forgot the return addSpacesToString. Therefore it was returning 'void', which didn't fit the interface.

     addSpacesToString(s:string){
          return s = s.replace(/([A-Z])/g, ' $1').trim()
          console.log(s)
          }