“Contact[]”类型的参数不能分配给“Contact”类型的参数

Question

我使用angualar编写了客户端和服务器端，当我尝试addnewContact时，它抛出了以下错误：

错误:src/app/Contact/contacts.Component.ts:32:28- error TS2345:类型'Contact[]‘的参数不能分配给'Contact’类型的参数。键入“Contact[]”缺少“联系人”类型中的下列属性：_id、first_name、last_name、phone

在contact.component.ts中出现了错误，我试图将数据推送到联系人中，并将其抛出错误。

contact.service.ts.

    import { Injectable } from '@angular/core';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { HttpClientModule} from '@angular/common/http';
    import {Contact} from './contact';
    import {map} from 'rxjs/operators';
    import {Observable,of, from } from 'rxjs';

    @Injectable()
    export class ContactService {

      constructor(private http: HttpClient) { }

      httpHeader = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }  


      getContacts(): Observable<Contact[]> {
        return this.http.get<Contact[]>('http://localhost:3000/api/contacts');
      }

      addContact(newContact) : Observable<Contact[]>
      {
        return this.http.post<Contact[]>('http://localhost:3000/api/contacts', newContact);
      }
      deleteContacts(id)
      {
        return this.http.delete('http://localhost:3000/api/contact'+id)
        .pipe(map((res: Response) => res.json()));
      }
    }

contacts.component.ts

    import { Component, OnInit } from '@angular/core';
    import {ContactService} from '../contact.service';
    import {Contact} from '../contact';
    import { HttpClient, HttpHeaders } from '@angular/common/http';
    import { HttpClientModule} from '@angular/common/http';

    @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 => {
            this.contacts.push(contact);
          });
      }

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

      ngOnInit() {
        this.contactService.getContacts()
          .subscribe(contacts =>
            this.contacts = contacts);
      }

    }

contact.component.html

    <div>
        <h2 class="page-header">Add Contact</h2>
        <form (submit) = "addContact()">
            <div>
                <label>First Name</label>
                <input type="text" [(ngModel)]="first_name" name = "first_name" class = "form-control">
            </div>
            <div>
                <label>Last Name</label>
                <input type="text" [(ngModel)]="last_name" name = "last_name" class = "form-control">
            </div>
            <div>
                <label>Phone</label>
                <input type="text" [(ngModel)]="phone" name = "phone" class = "form-control">
            </div>
            <input type="submit" class = "btn btn btn-success" value = "Add">
        </form>
    </div>
    <hr>
    <div>
        <div *ngFor = "let contact of contacts">
            <div class="list-group">
                {{contact.first_name}}
            </div>
            <div class="list-group">
                {{contact.last_name}}
            </div>
            <div class="list-group">
                {{contact.phone}}
            </div>
            <div>
                <input type="button" (click) = "deleteContacts(contact._id)" value = "Delete" class = "btn btn-danger">

            </div>
        </div>
    </div>

Answer 1

在服务方法上表示的类型是contact数组Contact[]。

addContact(newContact) : Observable<Contact[]>
{
  return this.http.post<Contact[]>('http://localhost:3000/api/contacts', newContact);
}

当您尝试调用contacts.push()时，它只需要一个联系人Contact。

如果您的addContact()方法只返回一个Contact，只需更正类型：

addContact(newContact) : Observable<Contact>
{
  return this.http.post<Contact>('http://localhost:3000/api/contacts', newContact);
}