如何在角度订阅服务后全局分配一个值

Question

Is there any way to assign a value globally outside of a method in my app component?

My service looks like this:

import { NumberInput } from '@angular/cdk/coercion';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Candidato } from "../interfaces/candidato";
import { Cuestionario } from '../interfaces/cuestionario';
import { Respuesta } from '../interfaces/Respuesta';
import { Verdaderos } from '../interfaces/verdaderos';
@Injectable({
  providedIn: 'root'
})
export class CandidateService {

  url="http://localhost:3000/api"

  constructor(private http:HttpClient) { }



  getPersona(ID:Number):Observable<Candidato[]>{
    return this.http.get<Candidato[]>(this.url + "/persona/searchrh/"+ID)
  }

  deletePersona(ID_RH:Number,ID:Number){
    return this.http.delete<Respuesta>(this.url+"/persona/deleteRH/"+ID_RH+"/"+ID)
  }

  getCandidato(ID:Number):Observable<Candidato>{
    return this.http.get<Candidato>(this.url + "/persona/search/"+ID)
  }

  getCuestionarioRespuestas(ID:Number):Observable<Verdaderos[]>{
    return this.http.get<Verdaderos[]>(this.url + "/cuestionario/"+ID)
  }
}

With interface Verdaderos looking like this:

export interface Verdaderos{
    Pregunta: number;
}

What I get from the service is an object array containing certain IDs belonging to all the "answers" with certain response, the issue here is I need to count them in order to sort them properly. My method looks like this, with M,N and P being global variables equal to zero.

getRespuestasCandidato(ID: Number) {
    this.Persona.getCuestionarioRespuestas(ID).subscribe((data:Verdaderos[]) =>{
      this.conteo = data;
      this.numbers = this.conteo.map(x => x.ID_Pregunta);
      console.log(this.numbers)

      const N2 = this.N1.filter(x => this.numbers.includes(x));
      const countN2 = N2.length;
      console.log(countN2)

      const M2 = this.M1.filter(x => this.numbers.includes(x));
      const countM2 = M2.length;
      console.log(countM2)

      const P2 = this.P1.filter(x => this.numbers.includes(x));
      const countP2 = P2.length;
      console.log(countM2)
      this.N = countN2;
      this.M = countM2;
      this.P = countP2
    })
  }

Printing any variable avia console naturally gets me the value I'm looking for, but I haven't been able to assign those values to the global variable in order to plot them using ngx-charts

NE = 100 - this.N- this.M- this.P

single = [
    {
      "name": "Narcisismo",
      "value": this.N    },
    {
      "name": "Maquiavelismo",
      "value": this.M
    },
    {
      "name": "Psicopatia",
      "value": this.P
    },
    {
      "name": "No evaluado",
      "value": this.NE
    }
  ];

Naturally, single is declared before the constructor, and that's what I need to render a pie chart with the correct data

Is there something wrong with my logic or my syntax? I'm calling the method this.getRespuestasCandidato(this.ID); "inside" AfterViewInit, but even then, if I change the lifecycle, I haven't been able to get the values I need for my chart

Here's the html:

<div class="wrapperuser">
    <div class="container-sm grafico">
        <ngx-charts-pie-chart
        [view]="view"
        [results]="single"
        [gradient]="gradient"
        [legend]="showLegend"
        [labels]="showLabels"
        [doughnut]="isDoughnut">
        </ngx-charts-pie-chart>
    </div>
</div>

Answer 1

On option is to use pipeable operator map to transform the stream into needed data and use the async pipe operator in the template. This takes care of subscribing and unsubscribing.

single$: Observable<ISingleInterface> = of()

ngOnInit() {
    this.single$ = this.Persona.getCuestionarioRespuestas(ID).pipe(
        map((data: Verdaderos[]) => {
            // calculate `single` as in question
            return single;
        }),
        // the following may be required depending on if ngx-charts needs this
        // startWith(defaultSingleValue)
    );
}

<div class="wrapperuser">
    <div class="container-sm grafico">
        <ngx-charts-pie-chart
        [view]="view"
        [results]="single$ | async" <---------------- async pipe subscribes and passes value
        [gradient]="gradient"
        [legend]="showLegend"
        [labels]="showLabels"
        [doughnut]="isDoughnut">
        </ngx-charts-pie-chart>
    </div>
</div>

If you don't include a default via startWith, single$ | async single$ | async will initially pass null and then the data will be pass to the component. You may want to guard fully against this with a wrapping <div *ngIf="(single$ | async) as single">

An alternative is to manually subscribe within the subscribe assign to variable on the component this.single = // calc but the same thing will happen. It'll begin with an an initial value that updates once the data is received.