如何用Python与AngularJS将Pandas DataFrame展示为表格格式

以下是针对你的AngularJS表格无法正常渲染JSON数据的常见问题排查和修复方案：

1. 确认Excel列名与前端模板完全匹配 #

Pandas导出JSON时会直接使用Excel中的原始列名作为键名。如果你的example.xlsx中的列名和前端模板里的Column 1/Column 2/Column 3存在差异（比如大小写、空格、拼写错误），就会导致数据无法显示。

验证方法：
在$http回调中添加调试代码，查看返回的JSON结构：

$http.get('/data').then(function(response) {
    console.log('返回的数据:', response.data); // 打印到浏览器控制台
    $scope.data = response.data;
});

检查控制台输出的对象键名是否和模板中的列名完全一致。

修复示例：
如果Excel列名是Column1（无空格），则前端模板需要对应修改：

<td>{{row.Column1}}</td>

2. 确保数据成功加载并赋值 #

添加错误捕获逻辑，确认请求是否成功完成：

app.controller('ExampleCtrl', function($scope, $http) {
    $http.get('/data')
        .then(function(response) {
            $scope.data = response.data;
        })
        .catch(function(error) {
            console.error('加载数据失败:', error); // 捕获请求错误
        });
});

3. 添加基础样式让表格可见 #

你的表格没有任何CSS样式，可能已经渲染但因无边框/背景而看起来像是没显示。添加简单样式：

<head>
    <title>My Dashboard</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        table { border-collapse: collapse; width: 80%; margin: 20px auto; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>

4. 处理空数据或无数据的情况 #

如果Excel文件为空，表格tbody会没有内容，可以添加空数据提示：

<tbody>
    <tr ng-repeat="row in data">
        <td>{{row['Column 1']}}</td>
        <td>{{row['Column 2']}}</td>
        <td>{{row['Column 3']}}</td>
    </tr>
    <tr ng-if="!data || data.length === 0">
        <td colspan="3">暂无数据</td>
    </tr>
</tbody>

5. 检查跨域问题（如果前后端运行在不同端口） #

如果你的Flask后端运行在默认的localhost:5000，而前端文件直接用浏览器打开（file://协议），会触发跨域限制。此时需要：

• 将前端文件放入Flask的static目录，通过http://localhost:5000/static/index.html访问
• 或者在Flask中添加路由直接返回index.html：

from flask import send_from_directory

@app.route('/')
def index():
    return send_from_directory('.', 'index.html') # 假设index.html和app.py同目录

内容的提问来源于stack exchange，提问作者Hari The Flemish