时间戳

首页 > 解决方案 > 日期以奇怪的方式显示角度 6

javascript - 日期以奇怪的方式显示角度 6

问题描述

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

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

在此处输入图像描述

第一条评论来自昨天，第二条评论是新评论，你可以在一小时前提交显示日期后看到，而不是现在？.

  1. 当用户刷新浏览器时，这里显示的是什么检查顶部评论时间？ 在此处输入图像描述

我想要的是旧评论应该在顶部，新评论在底部，新评论现在应该有时间，而不是在刷新之后

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

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

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

标签： javascriptangularhtmltypescripttimeago

解决方案

那是因为您发送到服务器并立即使用的值是不同的。请注意，您直接使用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()而不是.push()，如下所示：

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

但这只有在渲染之前没有对该数据进行任何其他转换时才有效，例如 HTML 中的管道。

推荐阅读