Angular表格全屏展开功能失效问题求助

问题现状 #

点击全屏图标时，脚本能正常切换full-card类名，但表格所在卡片无法铺满页面，无报错信息。

核心原因分析 #

1. HTML结构错误：dashboard.component.html中<app-card>标签未正确闭合，导致DOM结构异常，样式无法正常渲染。
2. CSS选择器依赖问题：styles.scss中.pcoded .card.full-card的选择器依赖根容器.pcoded，若卡片组件不在该容器下，样式无法命中。
3. 内容溢出未处理：全屏状态下卡片高度固定，但内部card-body和表格容器未设置滚动，内容溢出后无法查看，导致视觉上未达到全屏效果。

修复步骤 #

1. 修复HTML结构错误 #

修改dashboard.component.html，闭合<app-card>标签：

<div class="col-md-12 col-xl-8 left">
    <app-card [title]="'Squads Information'"
      [cardClass]="'project-task'" [blockClass]="'p-b-10'">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Squad</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                     <div class="task-contain">
                         <h6 class="bg-c-blue d-inline-block text-center">A</h6>
                         <p class="d-inline-block m-l-60 table-text">AG Technology I</p>
                     </div>
                 </td>
              </tr>
         </tbody>
       </table>
     </div>
   </app-card> <!-- 修复：正确闭合标签 -->
</div>

2. 调整CSS样式，确保全屏样式生效 #

修改styles.scss，简化选择器并添加内容滚动处理：

/* 直接使用全局选择器，避免依赖父容器 */
.card.full-card {
  position: fixed;
  top: 80px;
  z-index: 99999;
  box-shadow: none;
  left: 0; /* 修改为left:0，确保从左侧开始铺满 */
  right: 0;
  border-radius: 0;
  border: 1px solid #ddd;
  width: 100vw; /* 默认全屏，后续根据导航状态覆盖 */
  height: calc(100vh - 80px);
  overflow: hidden;

  /* 处理内部内容滚动 */
  .card-body {
    height: 100%;
    overflow-y: auto;
  }

  .table-responsive {
    height: 100%;
  }
}

/* 保留原导航状态的宽度适配 */
.pcoded[vertical-nav-type="expanded"] .card.full-card {
  width: calc(100vw - 287px);
}
.pcoded[vertical-nav-type="collapsed"] .card.full-card {
  width: calc(100vw - 97px);
}
.pcoded[vertical-nav-type="offcanvas"] .card.full-card {
  width: 100vw;
}

/* 原card-load样式保留 */
.card.card-load {
  position: relative;
  overflow: hidden;
  .card-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 999;
    i {
      margin: 0 auto;
      color: #ab7967;
      font-size: 20px;
    }
  }
}

3. 优化全屏切换逻辑（可选） #

在card.component.ts中初始化fullCard和fullCardIcon的默认值，避免初始状态下的undefined：

export class CardComponent implements OnInit {
  // ...其他属性
  fullCard: string = ''; // 初始化空字符串
  fullCardIcon: string = ''; // 初始化空字符串
  // ...其他代码
}

验证要点 #

• 点击全屏图标后，检查DOM中卡片元素是否正确添加full-card类
• 确认卡片是否铺满页面，内部表格内容可滚动
• 切换导航折叠状态时，卡片宽度是否自动适配

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