在Angular的*ngFor中结合*ngIf实现元素按需显示及div显隐控制

我来帮你搞定这个需求！你要实现的是Angular里*ngFor循环内的div初始隐藏，点击对应链接再显示，下面是完整的实现方案：

1. 组件TypeScript代码 #

首先在你的组件类里定义一个对象来存储每个评论ID的显示状态，再写一个触发显示/隐藏的函数：

import { Component, OnInit } from '@angular/core';

// 假设你的评论数据类型是这样的
interface Comment {
  id: number;
  // 其他评论属性...
}

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  commentData: Comment[] = []; // 你的评论列表数据
  showReply: { [key: number]: boolean } = {}; // 存储每个评论的回复框显示状态

  ngOnInit(): void {
    // 假设这里是获取评论数据的逻辑（比如从API请求）
    this.getCommentData().then(data => {
      this.commentData = data;
      // 初始化所有回复框为隐藏状态
      this.commentData.forEach(comment => {
        this.showReply[comment.id] = false;
      });
    });
  }

  // 模拟获取评论数据
  getCommentData(): Promise<Comment[]> {
    return Promise.resolve([
      { id: 1 },
      { id: 2 },
      { id: 3 }
    ]);
  }

  // 点击链接时触发的函数，切换对应ID的回复框显示状态
  toggleReplyBox(commentId: number): void {
    this.showReply[commentId] = !this.showReply[commentId];
    // 如果只需要显示不需要隐藏，就改成 this.showReply[commentId] = true;
  }
}

2. HTML模板代码 #

然后在你的模板里，ngFor循环中绑定点击事件和ngIf判断：

<!-- 遍历评论列表 -->
<div *ngFor="let comment of commentData" class="comment-item">
  <!-- 评论内容区域 -->
  <p>{{ comment.id }} - 这里是评论内容</p>

  <!-- 显示回复的链接 -->
  <a class="addReplyLink" (click)="toggleReplyBox(comment.id)">点击此链接可显示回复框</a>

  <!-- 需要显示/隐藏的回复容器 -->
  <div class="addReplyContainer" *ngIf="showReply[comment.id]">
    这里是回复输入框或回复内容区域
  </div>
</div>

关键要点说明 #

• 使用**对象showReply**来存储每个评论ID的状态，而不是数组：因为评论ID可能不是连续的数字，用对象以ID为键的方式更可靠，能精准对应每个评论的状态。
• 初始化状态：在获取到评论数据后，遍历每个评论并设置showReply[comment.id] = false，确保页面加载时所有回复框都是隐藏的。
• 点击事件传递ID：点击链接时把当前评论的ID传给函数，这样就能准确切换对应回复框的显示状态。

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