未使用 angular 上输入的数据填充 mongoDB 数据库

Question

我正在使用 MEAN 堆栈编写一个 post 表单函数，它将数据保存到数据库中。当通过 postman 在节点上输入数据时，express，mongoose 端将其存储在数据库中。然而，当通过 angular 前端输入日期时，数据没有存储，我将这种方法用于其他形式并且有效但是这个方法没有：

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>

打字稿：

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 函数在服务中工作正常，只是 post。使用 postman 发布数据效果很好，但从前端它只保存在 mongoose 模式中设置的默认数据

架构：

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 前端输入的数据：

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

{username: 'User', message: 'Content', messageDateTime: '2022-03-04T23:23:32.040Z', _id: '62229f740a9c53a525774f01', __v: 0} message: "Content" messageDateTime: "2022-03-04T23:23:32.040Z" username: "User" __v: 0 _id: "62229f740a9c53a525774f01" [[Prototype]]: Object

（post人访问的存储数据）：

{ "_id": "62229f740a9c53a525774f01", "username": "User", "message": "Content", "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 header，假设您的后端需要 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');
}

未使用 angular 上输入的数据填充 mongoDB 数据库

Not populating mongoDB database with data being entered on angular

node.js

angular

mongodb

express

mean