如何在旧评论之后显示新评论？答案

【问题标题】：How to display new comments after the old comments?如何在旧评论之后显示新评论？
【发布时间】：2018-10-30 20:43:40
【问题描述】：

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

检查这个：当用户提交评论时显示如下，

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

这是我的解决方案，Note am momet js 用于日期格式

ts中添加和获取cmets的函数

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

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

【问题讨论】：

你能在获取和排序后检查comments的值吗？

标签： javascript angular typescript angular6

【解决方案1】：

使用Array.unshift() 代替Array.push()。

【讨论】：

【解决方案2】：

你的答案很简单，如果要使用 push()，则需要使用 splice()。并将新的 cmets 放在数组的开头。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 看看这个。

我的错误是我提到 splice() 不是切片。

【讨论】：

为什么要切片？使用Array.unshift() 而不是Array.push()
@Stavm +1 我曾经用 slice 来做一些其他的事情，所以这让我直接想到了我的脑袋
@Talg123 // 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.slice(this.addForm.value); this.addForm.reset(); }); 但还是没有解决问题
@user9964622 我的错误我提到 splice() 不是切片。现在看看这个
@Stavm 您的建议使用 unshift() 可以按预期工作，非常感谢我会接受这个答案