Angular 14无运行报错但页面表格完全不显示问题排查

云原生阿岚

2026-8-29

问题根因

最直接的渲染错误：show-dep.component.html存在DOM结构残缺，文件末尾只有</table>闭合标签，缺失了最外层的起始标签，导致整个表格节点结构非法，Angular无法正常渲染，连表头都不会输出。
路由配置缺失：当前路由规则没有配置根路径''的跳转逻辑，直接访问localhost:4200时不会加载DepartmentComponent，自然不会渲染内部的<app-show-dep>组件。
潜在的接口请求问题：Django后端默认拦截跨域请求，Angular运行在4200端口、后端运行在8000端口属于跨域场景，不配置的话就算表格渲染成功也拿不到SQLite里的数据。

修复步骤

第一步：修复表格结构，补全show-dep.component.html中缺失的<table>起始标签，修正后完整代码如下：

<table class="table table-striped"> <!-- 补全起始标签，可按需添加Bootstrap样式类 -->
    <thead>
        <tr>
            <th>DepartmentId</th>
            <th>DepartmentName</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let dataItem of DepartmentList">
            <td>{{ dataItem.DepartmentId }}</td>
            <td>{{ dataItem.DepartmentName }}</td>
            <td>
                <button type="button" class="btn btn-light mr-1">
                    Edit
                </button>
                <button type="button" class="btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

第二步：修复路由配置，修改app-routing.module.ts，添加根路径重定向规则，保证访问根地址时自动跳转到部门页面：

const routes: Routes = [
  { path: '', redirectTo: 'department', pathMatch: 'full' }, // 新增该行
  { path: 'employee', component: EmployeeComponent},
  { path: 'department', component: DepartmentComponent}
];

同时确认根组件app.component.html中存在<router-outlet></router-outlet>标签，否则路由加载的组件不会被渲染到页面。

第三步：配置Django跨域允许，解决接口请求拦截问题：
安装跨域依赖：执行命令pip install django-cors-headers
修改Django项目的settings.py配置：

INSTALLED_APPS = [
    # 保留原有其他配置项
    'corsheaders',
]

MIDDLEWARE = [
    # 把跨域中间件放在中间件列表的最顶部
    'corsheaders.middleware.CorsMiddleware',
    # 保留原有其他中间件配置
]

# 开发环境临时允许所有源访问，生产环境请替换为指定前端域名
CORS_ALLOW_ALL_ORIGINS = True

第四步：验证效果：分别重启ng serve和python3 manage.py runserver，先直接访问http://127.0.0.1:8000/department/确认接口能正常返回部门列表JSON，再访问localhost:4200即可看到正常渲染的部门表格。

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