даты отображаются странным образом угловой 6

Question

У меня приложение в угловом пользователь может ввести комментарий, комментарий отображается автоматически и отображает дату, когда он был добавлен, странная часть выглядит следующим образом

1. Когда пользователь вводит комментарий, здесь отображается то, что отображается (время проверки)

Первый комментарий со вчерашнего дня, второй комментарий - новый, который вы можете увидеть после отправки сообщения о дате час назад, а не только сейчас? .

2. Когда пользователь обновляет браузер, что отображается, проверьте время верхнего комментария?

Что я хочу, так это старый комментарий должен быть вверху, а новый комментарий внизу и новый комментарий должен иметь время только сейчас, а не после обновления

Вот мое решение, Заметьте, что я не могу форматировать дату

функция добавления и получения комментариев в 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(). Здесь я записал эти 2 значения, обратите внимание на разницу:

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);

Как упоминалось в документах , этот канал работает с обычной Date, которую вы можете получить с помощью команды new Date(), и, наконец, вы можете просто сделать это:

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

* * 1016 или

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.