Angular表格数据不显示及Source Map错误排查求助

一、表格数据不显示问题 #

问题原因 #

从日志输出可见，data.Rows并非数组，而是一个包含$values属性的对象，真正的行数据数组存储在data.Rows.$values中。你的组件代码错误地将整个Rows对象包装为数组赋值给rows，导致*ngFor遍历的不是实际行数据集合。

修复代码 #

修改组件next回调中的赋值逻辑：

next: (data: QRT) => {
  console.log('Received object in ngOnInit:', data);
  this.report = data;
  // 正确提取行数据数组
  this.rows = data.Rows?.$values || [];
}

若你的QRT类型定义未包含$values字段，需同步更新类型：

interface QRT {
  // 其他已有属性...
  Rows: {
    $id: string;
    $values: Row[]; // Row为你的行数据类型
  };
}

二、Source Map 404错误 #

问题原因 #

该错误是Vite客户端的source map文件client.mjs.map无法被找到，通常与Vite配置或Angular构建设置不匹配有关。

解决方法 #

1. 调整Vite配置
   在项目根目录的vite.config.ts中添加sourcemap相关配置：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/builders/dev-server/vite-config';

export default defineConfig({
  plugins: [angular()],
  build: {
    sourcemap: false, // 或设置为'inline'，避免单独请求map文件
  },
  server: {
    sourcemap: false,
  },
});

2. 修改Angular构建配置
   在angular.json中找到对应项目的build和serve配置，关闭sourceMap：

"build": {
  "options": {
    "sourceMap": false
  }
},
"serve": {
  "options": {
    "sourceMap": false
  }
}

3. 浏览器临时屏蔽错误
   若仅需在开发时消除错误提示，可在浏览器开发者工具设置中，取消勾选"Enable JavaScript source maps"和"Enable CSS source maps"。

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