Question

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

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

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

这是我的解决方案，请注意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>

注意：要获取这些时间之前，之后，我使用管道：https://www.npmjs.com/package/time-ago-pipe

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

Answer 1

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

Answer 2

您的答案很简单，在使用push（）的情况下，需要使用splice（）。并将新注释放在数组的开头。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice看看这个。

我的错误是我认为splice（）不能切片。

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

2 个答案: