Angular中实现Ng-Bootstrap折叠面板单次仅展开一个

你当前的问题是所有折叠面板共用了同一个isCollapsed变量，导致操作一个面板时其他面板会同步变化。要实现同一时间仅展开一个面板，可以通过以下方式修改：

1. 调整TS文件逻辑 #

把单个状态变量改成记录当前激活面板的标识，这样能精准控制每个面板的展开/折叠状态：

// 记录当前展开的面板ID，初始为null表示所有面板都折叠
public activePanel: string | null = null;

/**
 * 切换面板状态
 * @param panelId 目标面板的唯一标识
 */
togglePanel(panelId: string): void {
  // 如果点击的是已展开的面板，就关闭它；否则切换到该面板并关闭其他
  this.activePanel = this.activePanel === panelId ? null : panelId;
}

2. 修改HTML文件代码 #

给每个折叠面板设置唯一标识，绑定对应的状态判断，同时避免重复使用模板引用变量（#collapse不能重复）：

<!-- 第一个折叠面板触发行 -->
<tr class="row-green pe-auto" (click)="togglePanel('panel1')" [attr.aria-expanded]="activePanel === 'panel1'">
  <td>
    <img src="assets/images/home/row-expand.png" />
    Created 
  </td>
  <td>User </td>
  <td>Tuesday</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row1-hide"
      #collapse1="ngbCollapse"
      [(ngbCollapse)]="activePanel !== 'panel1'"
    >
      <div class="t-logdiv">
        <div class="req-head">
          <div>
            <h5>od</h5>
            <h5>ath</h5>
            <h5>Referee</h5>
            <h5>Claim</h5>
          </div>
          <div>
            <span>PUT</span>
            <span>ur/jf/jf</span>
            <span>https://try.w</span>
            <span>.4.4.4.4</span>
          </div>
        </div>
        <div class="req-body">
          <div>
            <h5>
              Request Body
              <img
                src="assets/images/zone-info/copy.png"
                onclick="copy1()"
                data-toggle="tooltip"
                data-placement="top"
                title="copy"
              />
            </h5>
          </div>
          <div>
            <pre id="code1">
              <code>
                {{ "{" }}
                  "name": "Test",
                  "description": "Test",
                  "permission": [
                  "c",
                  "r",
                  "u",
                  "d"
                  ]
                  {{ "}" }}
                </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>

<!-- 第二个折叠面板触发行 -->
<tr class="row-blue" (click)="togglePanel('panel2')" [attr.aria-expanded]="activePanel === 'panel2'">
  <td>
    <img src="assets/images/home/row-expand.png" />
    Created user
  </td>
  <td>new kiid - Joey</td>
  <td>Tue 10</td>
</tr>

<tr class="clp-row clp-r1">
  <td colspan="3">
    <div
      class="collapse row2-hide"
      #collapse2="ngbCollapse"
      [(ngbCollapse)]="activePanel !== 'panel2'"
    >
      <div class="t-logdiv">
        <div class="req-head">
          <div>
            <h5>od</h5>
            <h5>h</h5>
            <h5>Referee</h5>
            <h5>jj</h5>
          </div>
          <div>
            <span>PUT</span>
            <span>num/url/url/uuu</span>
            <span>https://dummydata.net</span>
            <span>0.0.0.0</span>
          </div>
        </div>
        <div class="req-body">
          <div>
            <h5>
              Request Body
              <img
                src="assets/images/zone-info/copy.png"
                onclick="copy2()"
                data-toggle="tooltip"
                data-placement="top"
                title="copy"
              />
            </h5>
          </div>
          <div>
            <pre id="code2">
              <code>
                {{'{'}}
                  "name": "Test",
                  "description": "Test",
                  "permission": [
                  "c",
                  "r",
                  "u",
                  "d"
                  ]
                  {{'}'}}
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>

关键修改点说明 #

• 移除了原生Bootstrap的data-toggle和data-target属性，避免和Ng-Bootstrap的逻辑冲突
• 每个折叠面板使用唯一的模板引用变量（#collapse1、#collapse2）
• 通过activePanel变量判断当前展开的面板，实现互斥效果：打开新面板时自动关闭之前展开的面板
• 点击已展开的面板时会将其关闭

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