最好的回答是：不要这样做。一旦你使用Observables，试着保持在那里，并使用AsyncPipe。

const counts$: Observable<Record<string, number>>;
const countsListing$: Observable<string>:

constructor(
  public service: Service
) {
  this.counts$ = concat(
    of({}), // start with empty object until we get service result
    this.service.getCountData().pipe(
      map(this.countDataToRecord)
  ).pipe(
    shareReplay(1) // do it once, not once per subscriber
  );
    
}

countDataToRecord(countData) {
  return countData.reduce(
    (acc, {data, value}) => {
      acc[data] = value;
      return acc;
    },
    {}
  );
}

然后，您可以通过将

<pre>{countsListing | async | json}</pre>

不需要.subscribe()，也不用担心退订。

由于TS是异步的，我是新手，我不知道如何全局存储订阅的变量，但设法将其存储在一个数组中以供使用。

getCountData():Observable<any>
  {
    return this._http.get(`${this.castapi}/pie`)
  }

...使用新的SQL查询

SELECT column AS data, COUNT(*) AS value FROM table GROUP BY column ORDER BY column

...返回了一个格式为

{
   "data": "random string",
   "value": 10
}

然后就这样被使用...

single = [];
ngOnInit(): void {
    this.service.getCountData().subscribe(res => {
      console.log(res,"data arr");
      this.single = res.data.map((array: { data: any; value: any; }) => ({ name: array.data, value: array.value }))
    });
  }

对不起，如果它有点平淡无奇，没有经验的TS和只是想发挥周围的ngx图表使用API数据。