Angular 11中AmCharts 5股票图比较回调无响应问题求助

你的代码存在两个关键问题导致下拉列表无内容：

1. 返回值类型错误：AmCharts的searchCallback要求返回Promise，但你当前返回的是RxJS的Subscription对象（subscribe()的返回值），AmCharts无法识别这个类型，无法处理异步结果。
2. 变量笔误：代码最后返回的items未定义，实际你生成的结果数组是list。

修正后的代码 #

方案1：使用firstValueAsync（推荐，替代已弃用的toPromise） #

import { firstValueAsync } from 'rxjs';

// ...

const comparisonControl = am5stock.ComparisonControl.new(root, {
  stockChart: stockChart,
  searchable: true,
  searchCallback: async function(query) {
    // 将Observable转为Promise
    const cos: ICompanySearchResults = await firstValueAsync(
      that._company.getListOfCompanies(query).pipe(takeWhile(x => that.alive))
    );

    const filteredCompanies = cos.data;
    const list = [];
    for (const item of filteredCompanies) {
      list.push({label: item.name, subLabel: item.ticker, id: item.cik});
    }
    return list; // 返回正确的结果数组
  }
});

方案2：使用toPromise（兼容旧版RxJS） #

如果你的项目仍在使用RxJS 6.x及以下版本，可以用toPromise()：

const comparisonControl = am5stock.ComparisonControl.new(root, {
  stockChart: stockChart,
  searchable: true,
  searchCallback: async function(query) {
    const cos: ICompanySearchResults = await that._company.getListOfCompanies(query)
      .pipe(takeWhile(x => that.alive))
      .toPromise();

    const filteredCompanies = cos.data;
    const list = [];
    for (const item of filteredCompanies) {
      list.push({label: item.name, subLabel: item.ticker, id: item.cik});
    }
    return list;
  }
});

核心说明 #

• 异步适配：通过async/await配合RxJS的Promise转换方法，让searchCallback返回AmCharts需要的Promise类型，确保异步请求的结果能被正确接收并渲染。
• 变量修正：将返回的未定义变量items改为实际生成的list数组，保证数据能正确传递给下拉列表组件。

内容的提问来源于stack exchange，提问作者Robert Kovacs