Angular 6: дата исчезает при обновлении

У меня есть текстовое поле, которое позволяет пользователю отправлять комментарии, я хочу получить дату во время отправки комментария и сохранить в json вместе с добавленным комментарием.

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

Обратите внимание, я использую json-сервер

после того, как комментарий будет отправлен в файл json, я хотел бы иметь что-то вроде этого:

"comment": [
    {
  "id": 1,
  "localTime": "2018-10-27T13:42:55",
  "description": "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et lig\n"
}
]

Проблема: прямо сейчас, когда отправлен комментарий, у меня на сервере json следующее:

 "comment": [
     {
  "id": 1,
  "localTime": null,
  "description": "Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et lig\n"
}

]

Вот что я до сих пор пытался извлечь дату из введенного комментария.

HTML:

<form class = "add-comments" [formGroup] = "addForm" (keyup.enter) = "addComments()">
      <input type = "hidden" id = "localTime" name = "localTime">
    <div class = "form-group">
      <textarea class = "form-control" rows = "1" placeholder = "Add comments" formControlName = "description" id = "description"></textarea>
    </div>
  </form>

Вот метод на компо ц.

  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);
    });
    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}:${minute}:${second}`;

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

  }

Вот сервис для добавления комментариев на сервер

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Status } from '../model/statuses.model';
import { Comment } from '../model/comments.model';
import { User } from '../model/user.model';
@Injectable({
  providedIn: 'root'
})
export class UserService {
  status: Status[];
  constructor(private http: HttpClient) { }
  statusUrl = 'http://localhost:3000/statuses';
  commentsUrl = 'http://localhost:3000/comment';
  usersUrl = 'http://localhost:3000/users';

  addComments(comments: Comment) {
    return this.http.post(this.commentsUrl, comments);
  }
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }


}

Вот модель класса

export class Comment {
    id: number;
    username: string;
    email: string;
    days: number;
    localTime: Date;
    description: string;
}

что мне нужно изменить, чтобы получить то, что я хочу ??

Ваши данные будут удалены при обновлении. Вы можете попробовать использовать localStorage или sessionStorage для достижения своей цели.

Sarthak Aggarwal 27.10.2018 16:23

почему хранилище сеансов при использовании json-сервера ????

The Dead Man 27.10.2018 16:38

тьфу, почему вы доверяете клиент отправить ваш сервер правильную дату?

Stavm 27.10.2018 16:46

@Stavm это для меня qn или @sarthank?

The Dead Man 27.10.2018 17:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
67
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Используйте localStorage.

// Set localStorage   
localStorage.setItem('nameOfYourKey','data you will save');
// Retrieve data from
 localStorage.getItem('nameofYourKey');

Привет Спасибо за предложение, но я не хочу использовать локальное хранилище

The Dead Man 27.10.2018 16:58
Ответ принят как подходящий

После этой строки в вашем коде ...

const date = new Date();

... переменная даты уже будет содержать текущую дату и время. Вместо вызовов пользовательских функций для построения строки даты вы можете просто назначить эту дату экземпляру комментария перед его отправкой на сервер - поскольку ваш комментарий будет сериализован в JSON, атрибут даты будет автоматически преобразован в дату. строка, соответствующая желаемому формату: "2018-10-27T13:42:55".

Вместо этого вы можете просто переместить указанное выше назначение даты в свой метод addComments:

addComments(comments: Comment) {
  comments.localTime = new Date();
  return this.http.post(this.commentsUrl, comments);
}

позвольте мне проверить, я вернусь

The Dead Man 27.10.2018 16:58

Я изменил в соответствии с вашим ответом, но получаю следующую ошибку: Failed to compile. src/app/service/user.service.ts(27,5): error TS2322: Type 'number' is not assignable to type 'Date'.

The Dead Man 27.10.2018 17:03

Извините, я допустил ошибку при настройке кода. Это должен быть new Date(), подредактирую свой ответ.

mitschmidt 27.10.2018 18:28

Другие вопросы по теме