Angular中实现评论折叠：聊天板应用批量折叠功能开发问询

我来帮你一步步搞定这个批量折叠评论的功能，其实结合Angular的状态管理和Bootstrap的collapse类就能轻松实现，具体步骤如下：

1. 在组件类中添加状态控制逻辑 #

首先，我们需要一个变量来记录所有评论的折叠状态，再写一个切换状态的方法。打开你的组件.ts文件，添加以下代码：

// 组件类内部
isAllCollapsed = false; // 默认所有评论是展开状态

toggleAllComments(): void {
  // 点击按钮时切换状态
  this.isAllCollapsed = !this.isAllCollapsed;
}

2. 修改评论区模板的动态类绑定 #

你原来的评论区用了Bootstrap的collapse和show类来控制展开/折叠，现在我们需要把show类改成动态绑定，根据上面的状态变量来决定是否显示。修改你的模板代码：

<!-- 把固定的show类移除，换成动态绑定 -->
<div id="collapseOne" class="collapse" [class.show]="!isAllCollapsed" aria-labelledby="headingOne">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let comment of commentArr">
      {{ comment.body }}
      <div class="input-group-prepend float-right">
        <span class="input-group-text" id="inputGroup-sizing-sm">{{ comment.userName }}...</span>
      </div>
    </li>
  </ul>
</div>

这里的逻辑很简单：当isAllCollapsed为true时，!isAllCollapsed就是false，不会添加show类，评论区就会折叠；反之则添加show类，评论区展开。

3. 添加批量操作按钮 #

最后，在页面合适的位置（比如评论区上方）添加一个按钮，用来触发折叠/展开操作，按钮文字也可以根据状态动态切换：

<button class="btn btn-secondary mb-3" (click)="toggleAllComments()">
  {{ isAllCollapsed ? '展开所有评论' : '折叠所有评论' }}
</button>

扩展：如果是多个帖子的评论区 #

如果你有多个帖子，每个帖子都有自己的评论区，想要一键折叠所有帖子的评论，只需要让所有评论区的[class.show]都绑定同一个isAllCollapsed变量，按钮点击时切换这个全局状态，就能实现批量操作啦。

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