Question

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

错误：src/app/contacts/contacts.component.ts:32:28 - 错误 TS2345：“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[]。

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

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

1 个答案: