如何添加文本框以及用于评论的回复按钮?

时间:2019-05-20 10:34:18

标签: angular

我必须添加一个文本框和一个按钮来回复角度为2的评论。 单击回复按钮后,将出现一个文本框,该文本框允许我单击另一个“已发布”按钮来回复该特定评论? 我正在附上我的代码片段,如果我还是个有经验的2入门者,如果有人能帮助我,我将非常感激。

下面是我的代码:

HTML:

<div class="row" *ngFor="let commentEl of comments">
  <div class="col-xs-2 col-md-1">
    <img [src]=commentEl.profileImage class="img-circle img-responsive" alt="{{ commentEl.name }}" /></div>
  <div class="col-xs-10 col-md-11">
    <div>

      <div class="mic-info">
       <strong> {{ commentEl.name }} </strong>
      </div>
    </div>
    <div class="comment-text">
      {{ commentEl.comment }} 
    </div>

    <small>Date Posted: {{ commentEl.datePublish | date:'d/MM/yyyy' }} </small>
    <div class="action">
      <button type="button" class="btn btn-primary btn-xs" title="Reply">
        <i class="icons8-reply"></i>
      </button>

      <button type="button" class="btn btn-danger btn-xs" title="Delete">
        <i class="icons8-trash"></i>
      </button>

      <hr>
    </div>
  </div>
</div>

TYPESCRIPT:


import { Component, OnInit } from '@angular/core';
import { AppService } from 'src/app/app.service';
import { Comment } from './comment.model';


@Component({
  selector: 'app-event-comments',
  templateUrl: './event-comments.component.html',
  styleUrls: ['./event-comments.component.css']
})
export class EventCommentsComponent implements OnInit {

  private comments: Comment[] = [
    new Comment(1,'assets/images/profile-picture.png', 'John Bo', new Date, 'Excellent Event'),
    new Comment(2,'assets/images/profile-picture.png', 'Maxwell Sir', new Date, 'Looking forward for the pictures')


  ];



  constructor(private appService: AppService) { }

  ngOnInit() {


    this.appService.setTitle('Events');


  }

}

型号:


export class Comment {

    public commentID: number;
    public profileImage: string; // change to byte later
    public name: string;
    public datePublish: Date;
    public comment: string;

    constructor (commentID: number, profileImage: string, name: string, datePublish: Date, comment: string) {

        this.commentID = commentID;
        this.profileImage = profileImage;
        this.name = name;
        this.datePublish = datePublish;
        this.comment = comment;

    }
}


0 个答案:

没有答案