Node.js 表单数据无法获取角度节点mongodb

我有一个应用程序，可以将诸如名字、姓氏和电话号码等联系信息添加到MongoDB中。有了邮递员，它工作得非常好。正在成功添加数据

但是使用angular应用程序，我有一个表单可以接受这三个数据（

first\u name

，

last\u name

，

phone

）。现在，当我提交时，它显示控制台消息说“

添加失败”

”

My contact.component.html

<form (submit)="addContact()">
    <div class="form-group">
        <label for="first_name">First Name</label>
        <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Last Name</label>
        <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <!-- /.form-group -->
    <div class="form-group">
        <label for="first_name">Phone</label>
        <input type="text" [(ngModel)]="phone" id="phone" name="phone" class="form-control" required>
    </div>
    <!-- /.form-group -->
    <input type="submit" class="btn-btn-success" value="Add Contact">
</form>

名字
姓
电话

contacts.component.ts

    import { Component, OnInit } from '@angular/core';
  import {ContactService} from '../contact.service';
  import {Contact} from '../contact';


  @Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.css'],
    providers:[ContactService]
  })
  export class ContactsComponent implements OnInit {

  contacts: Contact[];
  contact:Contact;
  first_name:string;
  last_name:string;
  phone: string;

    constructor(private contactService: ContactService) {}

    addContact(){

        const newContact = {
            first_name: this.first_name,
            last_name : this.last_name,
            phone: this.phone
        }
        this.contactService.addContact(newContact)
        .subscribe(contact=>{
          console.log(contact); //displaymenssage
          this.contacts.push(contact);
          this.contactService.getContacts() .subscribe( contacts => this.contacts = contacts);
        });

    }

    deleteContact(id:any){
        var contacts = this.contacts;
        this.contactService.deleteContact(id)
        .subscribe(data=>{
            if(data.n==1) {
                for(var i=0; i<contacts.length; i++) {
                    if(contacts[i]._id == id) {
                        contacts.splice(i,1);
                    }
                }
            }
        })
    }
    ngOnInit() {
        this.contactService.getContacts()
        .subscribe( contacts => 
            this.contacts = contacts);
    }

  }

从'@angular/core'导入{Component，OnInit}；
从“../contact.service”导入{ContactService}；
从“../Contact”导入{Contact}；
@组成部分({
选择器：“应用程序联系人”，
templateUrl:'./contacts.component.html'，
样式URL:['./contacts.component.css']，
提供者：[联系服务]
})
导出类Contacts组件实现OnInit{
联系人：联系人[]；
联系人：联系人；
第一个名称：字符串；
姓氏：字符串；
电话：字符串；
构造函数（私有contactService:contactService）{}
addContact（）{
常数newContact={
名字：这个，名字，
姓：这个姓，
电话：这个电话
}
this.contactService.addContact（newContact）
.订阅（联系人=>{
console.log（contact）；//displaymenssage
这个。触点。推（触点）；
this.contactService.getContacts（）.subscribe（contacts=>this.contacts=contacts）；
});
}
deleteContact（id:any）{
var contacts=此。触点；
this.contactService.deleteContact（id）
.订阅（数据=>{
if（data.n==1）{
对于（var i=0；i
这是（联系=联系）；
}
}

调试时，我看到addContact函数没有从ng表单接收数据

获取此错误

请帮我调试代码。

---

任何帮助都将不胜感激。

猜一猜输入错误，另外一个angular 2在http拦截器中有缺点。 升级至最新版本

headers.append('Content-Type', 'application/json');

---

共享您的服务文件或将其发布在stackblitz中，因为这里讨论的是我可以在控制台中看到的文件。@RahulSharma您是否可以看到数据正在通过contacts.component.ts？headers.append（'Content-Type'，'application/json'）的函数addContact传递；您的意思是，使用最新的angular，调试此类错误会很容易？您可以为请求附加标题，angular 5具有超级改进的错误处理功能，您可以轻松确定确切的错误是什么。请尝试angular 5。谢谢