gpt4 book ai didi

javascript - 如何在旧评论后面显示新评论?

转载 作者:行者123 更新时间:2023-12-03 00:50:35 25 4
gpt4 key购买 nike

我有一个类似 Twitter 的应用程序,用户可以在 Angular 中输入评论,用户可以输入评论,评论会自动显示并显示添加日期,我希望添加的评论显示在旧评论之后,现在是新评论显示在旧评论之前。

检查一下:当用户提交评论时显示如下,

enter image description here

我想要的是旧评论应该在顶部,新评论应该在底部简而言之,我想要的是上图的反之亦然。

这是我的解决方案,注意使用momet js进行日期格式化

在ts中添加和获取评论的功能

    // get all comments
this.activeRouter.params.subscribe((params) => {
const id = params['id'];
this.userService.getComments(id)
.pipe(
map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
)
.subscribe(data => this.comments = data);
});
}

// add comments to server
addComments(task_id) {
const formData = this.addForm.value;
formData.task_id = task_id;
this.userService.addComments(formData)
.subscribe(data => {
this.comments.push(this.addForm.value);
this.addForm.reset();
});
// grab localtime
const date = new Date();
const d = date.getUTCDate();
const day = (d < 10) ? '0' + d : d;
const m = date.getUTCMonth() + 1;
const month = (m < 10) ? '0' + m : m;
const year = date.getUTCFullYear();
const h = date.getUTCHours();
const hour = (h < 10) ? '0' + h : h;
const mi = date.getUTCMinutes();
const minute = (mi < 10) ? '0' + mi : mi;
const sc = date.getUTCSeconds();
const second = (sc < 10) ? '0' + sc : sc;
const loctime = `${year}-${month}-${day}T${hour}`;

this. addForm.get('localTime').setValue(loctime);

}

这里是服务

      // add comments
addComments(comments: Comment) {
comments.localTime = new Date();
return this.http.post(this.commentsUrl, comments);
}

// get comments
getComments(id: number): Observable<any> {
return this.http.get(this.commentsUrl).pipe(
map(this.extractData),
catchError(this.handleError));
}

json 文件看起来如何

      "comment": [
{
"id": 1,
"localTime": "2018-10-29T23:12:57.129Z",
"description": "Putin is Dope\n"
},
{
"id": 2,
"localTime": "2018-10-29T23:13:25.743Z",
"description": "Obama is cool \n"
},
{
"id": 2,
"localTime": "2018-10-29T23:13:25.743Z",
"description": "No No do U know JOHN POMBE MAGUFULI? the president of Tanzania oooh oooh man he is savage , they call him Buldoser, Moderator please change the title "Who is the weakest president of all time?" => OBAMA \n"
}

]
}

这是 HTML

<html>
<div class="comments">
<div class="commets_header">
<button class="comments_button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed"
aria-controls="collapseExample">Hide comments<span class="comments_count">({{comments?.length}})</span></button>
</div>
<div class="wraper" [ngbCollapse]="isCollapsed">
<div class="comments-description" *ngFor="let comment of comments">
<div class="comments-photo">
<img src="https://randomuser.me/api/portraits/men/84.jpg" alt="">
</div>
<div class="comments_wrapper">
<div class="comments_details">
<h1>Mike Ross</h1>
<span class="days">{{comment.localTime | amTimeAgo}}</span>
</div>
<div class="comments_text">
<p>{{comment.description}} </p>
</div>
</div>
</div>
</div>

</div>
</html>

注意:要获取那些时间之前、horu 之前等,我使用管道:https://www.npmjs.com/package/time-ago-pipe

我的代码做错了什么???谢谢

最佳答案

使用Array.unshift()而不是Array.push()

关于javascript - 如何在旧评论后面显示新评论?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53060081/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com