返信の切り替え、返信の表示と非表示を切り替えます。そして、彼らは

Question

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

 
@Component({ 
 
    selector: 'app-module1-7', 
 
    templateUrl: './module1-7.component.html', 
 
    styleUrls: ['./module1-7.component.scss'] 
 
}) 
 

 
export class Module17Component implements OnInit { 
 
    public replyBox = false; 
 
    public txtcomment : string 
 
    public txtcommentSub : string 
 
    public show:boolean = false; 
 
    public prevClicked:number = -1;jsonObj={}; 
 
    public counter:Number; 
 
    public subcomments = false; 
 

 
    constructor() { 
 
    this.replyBox =false; 
 
    } 
 
    heroes = [{'comment':'first comment','show':false,'type':'comment'}, {'comment':'second comment','show':false,'type':'comment'},{'comment' :'third comment','show':false,'type':'comment'},{'comment':'fourth comment','show':false,'type':'comment'},{'comment':'fifth comment','show':false,'type':'comment'},{'comment':'sixth comment','show':false,'type':'comment'}]; 
 
    addHero(newHero,val,index) { 
 
    // console.log(newHero) 
 
    if(val == 0){ 
 
     if (newHero) { 
 
     this.jsonObj['comment']=newHero 
 
     this.jsonObj['show']= false; 
 
     this.heroes.unshift(
 
     { 
 
      "comment":newHero, 
 
      "show":false, 
 
      "type":"comment" 
 
     }); 
 
     this.txtcomment = ''; 
 
     console.log('new val', this.heroes) 
 
     } 
 
    } 
 
    else{ 
 
     newHero = newHero.replace(/"/g, "'"); 
 
     newHero = newHero.replace(/(?:\r\n|\r|\n)/g, ' '); 
 
     var str = '{"comment":"'+newHero+'","show":false,"type":"reply"}'; 
 
     console.log(str) 
 
     this.heroes.splice(index+1,0,JSON.parse(str)) 
 
     this.txtcommentSub= ''; 
 
     this.replyBox = false; 
 
     console.log(this.heroes) 
 
    } 
 
    } 
 
    subComment(i){ 
 
    this.replyBox = true; 
 
    if(this.heroes[this.prevClicked] && this.prevClicked != i) { 
 
     this.heroes[this.prevClicked].show = false; 
 
     } 
 
     this.heroes[i].show = !this.heroes[i].show; 
 
     this.prevClicked = i; 
 
    } 
 
    ngOnInit() { 
 
    this.replyBox =false; 
 
    this.counter = 3; 
 
    } 
 
    showMore(){ 
 
    this.counter = Number(this.counter) + 3; 
 
    } 
 
    less(){ 
 
    this.counter = Number(this.counter) - 3; 
 
    } 
 
}

.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; 
 
} 
 

 
.post-comments-child { 
 
    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; 
 
} 
 

 
.post-comments:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    left: auto; 
 
    right: -20px; 
 
    top: 9px; 
 
    bottom: auto; 
 
    border: 12px solid; 
 
    border-color: #fff transparent transparent #fff; 
 
} 
 

 
.links { 
 
    margin-right: 5px; 
 
}

<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,0)" [(ngModel)]="txtcomment"></textarea> 
 
        </div> 
 
       </div> 
 
       <ul class="comments" *ngFor="let hero of heroes; let i= index"> 
 
        <li class="clearfix" id={{i}} *ngIf="hero.type=='comment' && i < counter"> 
 
         <div class="post-comments"> 
 
          <p class="meta">Amrut Jadhav <a>Dec 18, 2014</a> : <i class="pull-right"><a (click)="subComment(i)"><small>Reply</small></a></i></p> 
 
          <p> 
 
           {{hero.comment}} 
 
          </p> 
 
          <p class="meta-footer"><a (click)="subcomments=!subcomments"><i class="pull-right fa " [class.fa-plus]="subcomments==false" [class.fa-minus]="subcomments==true" aria-hidden="true"></i></a></p> 
 
         </div> 
 
         <div class="" id="" *ngIf="hero.show"> 
 
          <div class="post-comments-text form-group" *ngIf="replyBox"> 
 
           <textarea class="form-control txtarea" id="exampleTextarea" rows="3" #newHero (keyup.enter)="addHero(newHero.value,1,i)" [(ngModel)]="txtcommentSub"></textarea> 
 
          </div> 
 
         </div> 
 
        </li> 
 
        <li class="clearfix" id={{i}} *ngIf="hero.type=='reply'"> 
 
         <div class="post-comments-child" style="margin-left:15%"> 
 
          <p class="meta">Amrut Jadhav <a>Dec 18, 2014</a></p> 
 
          <p> 
 
           {{hero.comment}} 
 
          </p> 
 
         </div> 
 
        </li> 
 
       </ul> 
 
       <div class="text-center"> 
 
        <button class="btn btn-secondary links" *ngIf="counter < heroes.length" (click)="showMore()"><i class="fa fa-arrow-down" aria-hidden="true"></i> show more</button> 
 
        <button class="btn btn-secondary links" *ngIf="counter > 3" (click)="less()"><i class="fa fa-arrow-up" aria-hidden="true"></i> less</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

を非表示にする必要があり、デフォルトでは、私は少し細かい問題を働く自分のコメントシステムを設計しています私は（+、 - ）をクリックすると、デフォルト&での返信を非表示にするされたアイコンにそれを表示する必要があります&隠します。 できるだけ明確にするために、コメントAがあり、そのコメントAの下にデフォルトで利用可能な回答がある場合は、&クリックしてください（+）アイコンすべての返信を表示する必要があります& - ）。 &もう一度（ - ）アイコンをクリックすると、すべての返信を非表示にする必要があります&アイコンは（+）に変更する必要があります。そのボタンをクリックすると特定のコメント表示が返されます。画像このhelps.Bootstrapクラスは、このメソッドを使用するために、すべての輸入をused.Addてきたここ

Answer 1

希望。スニペットを実行します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
<style> 
 

 
    #minus{ 
 
    display:inline; 
 
    } 
 
    .collapsed #minus{ 
 
    
 
    display:none; 
 
    
 
    } 
 
    #plus{ 
 
    
 
    display:none; 
 
    
 
    } 
 
    .collapsed #plus{ 
 
    
 
    display:inline; 
 
    
 
    } 
 
    
 
    
 
    </style> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
<div class="row" style="margin:100px auto;"> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item" style="text-align:center"> 
 
    Toggle List 
 
    </li> 
 
    <li class="list-group-item"> 
 
    <button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo"><span id="plus">+</span><span id="minus">-</span></button> 
 
    <div id="demo" class="collapse"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    </li> 
 
    
 
    
 
    </ul> 
 
    </div> 
 
    
 
</div> 
 

 

 
</body> 
 
</html>