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>

我正在设计自己的评论系统，有点工作正常问题是我想默认隐藏回复＆amp;当我点击（+， - ）图标时，它应显示＆amp;隐藏。所以要尽可能清楚，如果有评论A，然后在评论A下有一些答案默认情况下他们应该隐藏，＆amp;点击（+）图标时，所有回复都需要显示＆amp;加上图标更改为（ - ）。＆安培;再次当我点击（ - ）图标时，所有回复都需要隐藏＆amp;图标应更改为（+）。但点击按钮时会显示特定评论的回复。图像在这里

Answer 1

希望这会有所帮助。已经使用了Bootstrap类。添加所有导入以使用此方法。运行代码段。

＆＃13;

<!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>

＆＃13;

切换回复，显示和隐藏回复。默认情况下，它们应隐藏

1 个答案: