我必须添加一个文本框和一个按钮来回复角度为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;
}
}