Angular4点击跳转单页面却加载双页面的问题排查求助

看起来你碰到了两个头疼的问题：加载时个人资料页和公司页上下叠加，还有一个 ERROR TypeError: Cannot read property 'recieved' of undefined 的报错。我来帮你一步步拆解排查：

一、先解决 TypeError 错误 #

这个报错的核心是：你尝试访问一个未定义变量的 recieved 属性。可能的原因和解决方法如下：

• 检查属性拼写：先确认后端返回的字段是 recieved 还是正确拼写的 received？很多时候拼写错误会导致找不到属性，直接返回 undefined。
• 初始化数据对象：因为数据是从后端异步获取的，页面渲染时可能数据还没到，此时访问属性就会报错。你可以在组件里给数据对象先初始化一个空结构，比如：

  // 示例：假设你的职位数据变量是 jobData
  jobData = { recieved: '' }; // 或者根据实际结构初始化空对象
  

• 使用可选链或空值判断：在模板或代码里用可选链操作符 ?. 防止空值访问，比如模板里写：

  {{ jobData?.recieved }}
  

  或者用 *ngIf 确保数据存在后再渲染：

  <div *ngIf="jobData">
    <!-- 这里渲染职位资料内容 -->
  </div>
  

二、解决页面叠加的问题 #

加载时两个页面同时显示，大概率是渲染逻辑或路由配置出了问题，可以从这几个方向排查：

• 检查路由配置：确认从公司页跳转到个人资料页的路由是否正确，有没有不小心把两个组件同时挂载在同一个路由出口？比如路由配置里是否同时加载了公司组件和个人资料组件。
• 组件销毁逻辑：路由切换时，旧的公司页组件有没有被正确销毁？如果用的是 Angular 这类框架，默认路由切换会销毁旧组件，但如果你手动做了组件缓存或者自定义了路由策略，可能会导致旧组件残留。
• 页面显示隐藏的条件：是不是初始状态下两个页面的 DOM 都被渲染了，只有数据加载后才隐藏其中一个？可以加个加载状态，初始时显示加载占位符，等个人资料数据加载完成后再显示个人资料页，同时确保公司页的 DOM 被移除或隐藏。
• 修复 HTML 结构错误：你提供的 HTML 片段有明显的结构问题——<thead> 是 <table> 的子元素，不能放在 <td> 里面！错误的结构会导致浏览器异常渲染，可能也是页面布局混乱的原因之一。正确的结构应该是：

  <table>
    <thead>
      <tr>
        <th colspan="4">Job Requests</th>
      </tr>
    </thead>
    <tbody class="your-class-name">
      <tr>
        <td class="job">
          <!-- 这里放单元格内容 -->
        </td>
      </tr>
    </tbody>
  </table>
  

排查步骤建议 #

1. 先修复 HTML 结构的错误，这是最基础的，可能解决部分布局问题；
2. 定位代码中所有 .recieved 的引用，逐一检查拼写、变量初始化和空值处理；
3. 检查路由配置和组件的挂载/销毁逻辑，确保路由切换时只有目标页面被渲染。

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