Angular报NG0900错误：DataSource无效，如何从数据库拉取数据？

错误原因 #

你遇到的NG0900错误，本质是Angular尝试遍历一个非数组/非可迭代对象。从错误提示来看，你的questArray被赋值了字符串"DataSource is not valid. Please check you Datasource to proceed."，而非预期的数据库查询结果数组。这说明后端接口返回的response.message不是查询到的数组，而是错误提示——大概率是请求参数有误，导致后端无法正常执行查询。

具体修复步骤 #

1. 排查请求参数问题 #

先检查service.ts里的请求参数：

DataStoreId: '54545651247771316477 ', // 注意末尾有多余空格

这个参数末尾的空格可能导致后端无法识别对应的数据源，直接返回错误提示。先去掉空格，重新测试。

2. 完善接口返回的错误处理 #

在service.ts里，不要直接返回response.message，先判断请求是否成功：

getDatas() {
  const body = {
    Token: this.getToken(),
    DataStoreId: '54545651247771316477', // 去掉末尾空格
    Operation: 'read',
    Encrypted: 1951,
    Data: 'select * from "postgres".public.quest',
  };
  return this.http.post(baseUrl + 'Application/DataOps', body).pipe(
    map((response: any) => {
      // 假设后端返回的结构里有success/code字段标识请求状态
      if (response.success || response.code === 200) {
        return response.data; // 替换成后端实际返回数组的字段名，可能不是message
      } else {
        // 抛出错误或返回空数组，避免组件拿到非数组值
        throw new Error(response.message || '请求失败');
        // 或返回空数组：return [];
      }
    })
  );
}

3. 组件里添加错误处理 #

在main.ts的subscribe里添加错误回调，避免错误数据污染questArray：

getQuest(){
  this.connect.getDatas().subscribe({
    next: res => {
      this.questArray = res;
    },
    error: err => {
      console.error('拉取数据失败:', err);
      this.questArray = []; // 出错时重置为空数组，避免渲染报错
    }
  })
}

4. 验证后端返回结构 #

先通过打印完整response，确认后端返回的正确结构：

// 在service里临时添加打印，查看完整返回
return this.http.post(...).pipe(
  tap(response => console.log('完整返回:', response)),
  map(...)
);

确认后端成功时返回的数组字段到底是message还是其他字段（比如data），避免提取错误的字段。

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