评论和回复特定帖子的文本框

Question

我正在Angular中设计评论应用。波纹管代码工作正常：当我在文本框中输入消息并按回车键时，它会附加值。但是，我的问题是，当用户点击评论的回复按钮时，我想提供一个功能。它应该显示特定的子文本框。目前，当我点击回复按钮时，它会显示所有li的文本框。 in the image after click of any reply button it displays all child reply textbox but it should open particular comment box of particular comment

export class Module58Component implements OnInit {
  public replyBox = false;
  public txtcomment : string;
  heroes = ['first comment', 'second comment', 'third comment'];
  addHero(newHero: string) {
    if (newHero) {
      this.heroes.push(newHero);
      this.txtcomment = "";
    }
  }

  subComment(){
    this.replyBox = true;
    // alert('hello');
  }

  constructor() { 
    this.replyBox =false;
  }

  ngOnInit() {
     this.replyBox =false;
  }

}

.blog-comment::before,
.blog-comment::after,
.blog-comment-form::before,
.blog-comment-form::after {
    content: "";
    display: table;
    clear: both;
}

.blog-comment {
    // padding-left: 15%;
    padding-right: 15%;
}

.blog-comment ul {
    list-style-type: none;
    padding: 0;
}

.blog-comment .post-comments {
    border: 1px solid #eee;
    margin-bottom: 20px;
    margin-left: 85px;
    margin-right: 0px;
    padding: 10px 20px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    background: #fff;
    color: #6b6e80;
    position: relative;
}

.txtarea {
    border-radius: 4px !important;
}

.post-comments-text {
    margin-bottom: 20px;
    margin-left: 66px;
    margin-right: -18px;
    padding: 10px 20px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    position: relative;
}

.blog-comment .meta {
    font-size: 13px;
    color: #aaaaaa;
    padding-bottom: 8px;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #eee;
}

.blog-comment ul.comments ul {
    list-style-type: none;
    padding: 0;
    margin-left: 85px;
}

.blog-comment-form {
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 40px;
}

.blog-comment h3,
.blog-comment-form h3 {
    margin-bottom: 40px;
    font-size: 26px;
    line-height: 30px;
    font-weight: 800;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row">
        <div class="col-md-12">
            <div class="blog-comment">
                <h6 class="text-success">Discussion Name</h6>
                <hr/>
                <div class="mainCommentTextbox">
                    <div class="post-comments-text form-group">
                        <textarea class="form-control txtarea" id="exampleTextarea" placeholder="Enter your comment here" rows="3" #newHero (keyup.enter)="addHero(newHero.value)" [(ngModel)]="txtcomment" (blur)="addHero(newHero.value); newHero.value='' "></textarea>
                        <!-- <button class="float-right btn btn-primary" (click)=" addHero(newHero.value) ">Comment</button>  -->
                    </div>
                </div>
                <ul class="comments" *ngFor="let hero of heroes; let i= index">
                    <li class="clearfix" id={{i}}>
                        <div class="post-comments">
                            <p class="meta">Amrut Jadhav <a>Dec 18, 2014</a> : <i class="pull-right"><a (click)="subComment()"><small>Reply</small></a></i></p>
                            <p>
                                {{hero}}
                            </p>
                        </div>
                    </li>
                    <div class="" id="">
                        <div class="post-comments-text form-group" *ngIf="replyBox">
                            <textarea class="form-control txtarea" id="exampleTextarea" rows="3" #newHero (keyup.enter)="addHero(newHero.value)" [(ngModel)]="txtcomment" (blur)="addHero(newHero.value); newHero.value='' "></textarea>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </div>