日期以奇怪的方式显示 angular 6

Question

我在angular中有应用程序用户可以输入评论，评论会自动显示并显示添加日期，奇怪的部分如下

当用户在此处输入评论时显示的内容（检查时间）

第一条评论是昨天的，第二条评论是新的，你提交后能看到一个小时前的日期而不是现在吗？ .

当用户刷新浏览器时，这里显示的是查看置顶评论时间？

我要的是旧评论在上，新评论在下并且新评论现在应该有时间，而不是刷新后

这是我的解决方案，注意我的日期格式是 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

 <span class="days">{{comment.localTime | amTimeAgo}}</span>

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

我的代码哪里做错了？？？？谢谢

Answer 1

那是因为您发送到服务器并立即使用的值不同。请注意，您直接使用 loctime 变量，它在一些转换后保存一个值，但您只向服务器发送一个 new Date()。这里我记录了这两个值，注意区别：

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}`;

console.log('date:', date);
console.log('loctime:', loctime);
console.log('typeof date:', typeof date);
console.log('typeof loctime:', typeof loctime);

如 docs 中所述，此管道与常规 Date 一起工作，您可以使用 new Date() 命令获得它，最后您可以简单地执行此操作：

this.addForm.get('localTime').setValue(new Date());

或

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

因为您已经将此值存储到 date 变量中。

关于顺序：

顺序，当你从服务器获取评论时，当你只是添加新评论而不从服务器获取列表时不同，因为只有当你从服务器获取评论列表时才使用排序管道。我是说这部分：

this.userService.getComments(id)
  .pipe(
    map(data => data.sort((a, b) => new Date(b.localTime).getTime() - new Date(a.localTime).getTime()))
  )

要解决这个问题，您可以在将评论发布到服务器后对评论进行排序，但我认为最简单的方法就是使用 .unshift() instead of .push()，如下所示：

this.userService.addComments(formData)
  .subscribe(data => {
    this.comments.unshift(this.addForm.value);
    this.addForm.reset();
  });

但这只有在渲染之前没有对这些数据进行任何额外的转换时才有效，例如，HTML.

中的管道

日期以奇怪的方式显示 angular 6

dates are displaying in weird way angular 6

html

javascript

timeago

typescript

angular