Angular中nb-card最小化功能失效问题排查及实现咨询

你的代码已经正确触发了toggleCollapse函数并切换了isCollapsed状态，但缺少对应collapsed类的CSS样式定义，所以卡片视觉上没有变化。以下是具体解决步骤：

1. 补全卡片HTML结构 #

确保你的nb-card包含<nb-card-body>（最小化逻辑通常是隐藏卡片主体，保留头部）：

<nb-card status="primary" [ngClass]="{'collapsed': isCollapsed}">
  <nb-card-header>
    <div class="row justify-content-between align-items-center">
      <div class="col-auto">Client Systems Associated Assessment</div>
      <div class="col-auto">
        <button nbButton ghost (click)="toggleCollapse()">
          <nb-icon [icon]="isCollapsed ? 'plus-outline' : 'minus-outline'"></nb-icon>
        </button>
        <button nbButton ghost (click)="closeDialog()">
          <nb-icon icon="close-outline"></nb-icon>
        </button>
      </div>
    </div>
  </nb-card-header>
  <!-- 卡片主体，将被控制显示/隐藏 -->
  <nb-card-body>
    <!-- 这里是你的卡片内容 -->
  </nb-card-body>
</nb-card>

2. 添加CSS样式定义 #

在组件的.component.css文件中添加以下样式，控制collapsed类下的卡片主体显示状态：

方案1：直接隐藏（无动画） #

/* 折叠时隐藏卡片主体 */
nb-card.collapsed nb-card-body {
  display: none;
}

方案2：平滑折叠过渡（带动画） #

/* 默认状态下的卡片主体 */
nb-card nb-card-body {
  max-height: 2000px; /* 设置足够大的值容纳内容 */
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* 折叠状态下的卡片主体 */
nb-card.collapsed nb-card-body {
  max-height: 0;
}

3. 验证效果 #

点击按钮时，isCollapsed会切换状态，collapsed类会被添加/移除，CSS会自动控制卡片主体的显示/隐藏，实现最小化和最大化效果。

注：你代码中定义的@ViewChild(NbCardComponent) card目前未用到，Nebular的NbCardComponent本身没有内置折叠方法，因此自定义CSS是最直接可靠的实现方式。

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