Question

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

但是对于角度应用，我有一个接受这三个数据的表单（first_name，last_name，phone）。现在，当我提交它时会显示控制台消息“Failed to add”。

我的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);
    }

  }

当我调试时，我发现addContact函数没有从ng表单接收数据

收到此错误

请帮我调试代码。任何帮助将不胜感激。

Answer 1

猜错字错误，另一个角度2在http拦截器中有缺点。升级到最新的角度。

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

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

1 个答案: