不使用在角度上输入的数据填充 mongoDB 数据库

Question

我正在使用 MEAN 堆栈编写一个后表单函数，它将数据保存到数据库中。 当节点上通过postman输入数据时，express、mongoose端将其存储在数据库中。但是，当通过角度前端输入日期时，数据不会存储，我将这种方法用于其他表单，并且它有效，但是这个方法却行不通：

HTML：

<form [formGroup]="form" (submit)="addMessage()">
            <mat-form-field>
              <mat-label>Username:</mat-label>
              <input
                placeholder="Username"
                matInput
                formControlName="username"
                class="form-control"
                type="string"
                required
              />
            </mat-form-field>
            <br />
            <mat-form-field>
              <mat-label>Message:</mat-label>
              <input
                placeholder="Type Message Here..."
                matInput
                formControlName="message"
                class="form-control"
                type="string"
                required
              />
            </mat-form-field>
            <br />
            <mat-form-field>
              <mat-label>Message Date:</mat-label>
              <input
                placeholder="Type Message Here..."
                matInput
                formControlName="messageDateTime"
                class="form-control"
                type="date"
                required
              />
            </mat-form-field>
            <br />
            <button mat-raised-button color="basic" type="submit">Send</button>
            <br />
            <mat-divider></mat-divider>
          </form>

Typescript：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { MessageBoardService } from 'src/app/service/message-board.service';
import { Message } from 'src/app/models/messages.interface';

@Component({
  selector: 'app-message-board',
  templateUrl: './message-board.component.html',
  styleUrls: ['./message-board.component.css']
})
export class MessageBoardComponent implements OnInit {
  messages: Message[] = [];

  constructor(private messageService: MessageBoardService) { }
  form = new FormGroup({
    username: new FormControl(''),
    message: new FormControl(''),
    messageDateTime: new FormControl(''),
  });


  addMessage() {
    console.log('adding');
    const formData = new FormData();
    formData.append('username', this.form.value.username);
    formData.append('message',this.form.value.message);
    formData.append('messageDateTime',this.form.value.messageDateTime);
    this.messageService.postMessage(formData).subscribe((d) => {
      console.log(d);
    });
    //window.location.reload();
  }

  ngOnInit(): void {
    this.messageService.getMessage().subscribe((M: Message[]) => {
      this.messages = M;
    })
  }

}

服务：

postMessage(data: any){
    return this.http.post<any>("http://localhost:3000/Messages", data)
    .pipe(map((res:any)=>{
      return res;
    }))
  }

get 函数在仅在服务中工作正常帖子。 使用邮递员发布数据效果很好，但从前端它只保存猫鼬架构中设置的默认数据架构

：

const mongoose = require('mongoose');

const MessagesSchema = new mongoose.Schema({
    username:{
        type: String,
        required: false,
        default: "User"
    },
    message:{
        type: String,
        required: false,
        default:"Content"
    },
    messageDateTime:{
        type: Date,
        required: false,
        default: Date.now
    }
})

    
const Messages = mongoose.model( 'Messages', MessagesSchema);

module.exports =  Messages

使用 Angular 前端输入的数据：

数据库中保存的数据： （控制台输出）：

{用户名：'用户'，消息：'内容'，消息日期时间： '2022-03-04T23:23:32.040Z', _id: '62229f740a9c53a525774f01', __v: 0} 消息：“内容”消息日期时间：“2022-03-04T23：23：32.040Z” 用户名：“用户” __v：0 _id: "62229f740a9c53a525774f01" [[原型]]: 对象

(邮递员访问的存储数据):

{ "_id": "62229f740a9c53a525774f01", “用户名”：“用户”， "消息": "内容", "messageDateTime": "2022-03-04T23:23:32.040Z", “__v”：0 },

Answer 1

我不确定为什么需要 FormData，因为我从未在 Angular 中使用过它，

我通常将这样的数据发送到后端，

let dataToSend: any = {
  username: this.form.value.username,
  message: this.form.value.message,
  messageDateTime: this.form.value.messageDateTime
}

this.messageService.postMessage(dataToSend).subscribe((d) => {
  console.log(d);
});

假设您的后端，我还将更新服务和 Content-Type 标头正在等待 JSON。

let headers = new Headers();
headers.append('Content-Type', 'application/json');

postMessage(data: any)
{
  http.post('http://localhost:3000/Messages', JSON.stringify(data), {
   headers : headers
 }).pipe('Rest of the Code');
}