我在我的组件html中有一个div,我想在页面加载时隐藏它,并希望在链接点击时显示 . 我在* ngFor循环中有多个div,并且我已经为每个div分配了* ngIf = showReply [commentData.id],以便在组件加载时保持隐藏状态 .

后来当我点击链接时,我调用了一个函数,我将id设置为true .

下面是HTML片段:

<!-- Reply Link -->

这是我要显示div的点击链接

<div class="addReplyContainer" >
          <a  class="addReplyLink"  (click)="showReplyTextArea($event, 'showreply'+commentData.id)">Reply</a>
        </div>

        <!-- Add Reply -->
        <div [attr.commentId] = "commentData.target_id" *ngIf = "'showReply'[commentData.id]"
             class="addReplyContainer replyTextAreaContainer" >
          <textarea (keyup)="keyUpCommentTextarea(reply, commentData.id)" [(ngModel)]="reply" style="width:100%"
                    class="replyText commentText addReplyTextarea form-control"></textarea>
          <button [attr.commentId]="commentData.id" disabled class="btn btn-success addCommentBtn" (click)="addReply(commentData.target_id)">Add</button>
        </div>

以下是组件

列表comments.component.ts

import {Component, OnInit, ElementRef, ViewChild, Renderer2} from '@angular/core';
import { CommentsDataService} from "../../services/comments/comments-data.service";
import { Observable } from 'rxjs/Observable';
import { mergeMap } from 'rxjs/operators';
import {IComment} from "../../comments";
import {ICommentType} from "../../commentType";



declare let jQuery: any;
@Component({
  selector: 'app-list-comments',
  templateUrl: './list-comments.component.html',
  styleUrls: ['./list-comments.component.css'],
  providers:[CommentsDataService]

})
export class ListCommentsComponent implements OnInit {

  constructor(private commentsDataService:CommentsDataService, private el: ElementRef) {
  }

  commentsData :any; // Comment Data received from service.
  comment:string; // Comment text; declaration.
  reply:string;
  commentObj:any;
  commentArrayObj:any;
  public showreply_commentData;
  getComments;  // Declaration of function.
  saveComment;
  getUser;




  /**
   * This Function is triggered to
   * call save function and append
   * new comment.
   * Append new comment
   *
   */
  addComment()
  {

    this.comment = this.comment.trim();
    let commentObj;
    let comment = this.comment;
    commentObj ={
      "root_id":"1",
      "target_id": "1",
      "object": this.comment,
      "time_stamp":'2 secs ago',
      "profile_image":"/../../assets/images/no-user.png",
      "first_name" : "john",
    };

    //let commentObj = this.commentObj; //Put this.commentObj to push it into this.commentData

    if( typeof this.comment == "undefined" || this.comment === '' || this.comment == null ||  this.comment == '\n' || this.comment.length>500 )
    {

      return false;
    }
    else
    {
      this.commentsData.push( commentObj );
      this.comment = ''; // Empty comment Textarea.
      return comment;

    }

  }

  /**
   *
   * Function triggered when
   * reply link is clicked
   * @param event
   * @param targetId
   */
  showReplyTextArea(event, ngIf);
  showReplyTextArea(event, ngIf)
  {

    ngIf = true
    console.log(ngIf)

  }

如果showreply [commentData.id] == false / showreply [commentData.id] == true是为这样的ngFor切换ngIf的正确方法吗?

请协助 .

谢谢!

*UPDATE

我使用了 Tony Roczz 建议的解决方案

我使用了ngFor的索引来设置ngIf表达式为true或false .

HTML:

<!-- Reply Link -->
            <div class="addReplyContainer" >
              <a  class="addReplyLink"  (click)="showReplyTextArea($event,i )">Reply</a>
            </div>

            <!-- Add Reply -->
            <div [attr.commentId] = "commentData.target_id" *ngIf = "selectedIndex == i "
                 class="addReplyContainer replyTextAreaContainer" >
              <textarea (keyup)="keyUpCommentTextarea(reply, commentData.id)" [(ngModel)]="reply" style="width:100%"
                        class="replyText commentText addReplyTextarea form-control"></textarea>
              <button [attr.commentId]="commentData.id" disabled class="btn btn-success addCommentBtn" (click)="addReply(commentData.target_id)">Add</button>
            </div>
            <!-- -----Add Reply end------ -->

Component

showReplyTextArea(event, index)
  {


    this.selectedIndex = index; // Whenever user click on reply link the 
                                //  respective index is set equal to 
                                //  selectedIndex variable


    console.log( this.selectedindex);

  }

谢谢@Tony Roczz和@kaddath的帮助 .