未使用在角度上輸入的資料填充mongoDB資料庫

我正在使用 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>

打字稿：

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 前端輸入的資料：

保存在資料庫中的資料：（控制臺輸出）：

{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

(Data stored accessed by postman):

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

uj5u.com熱心網友回復：

我不確定你為什么需要 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');
}

標籤：node.js angular mongodb express mean

上一篇：MongoDB-如何從物件中$project專案？

下一篇：MongoDB和ReactJS聚合：如何回傳專案數？