Angular Component.ts 模块中的对象类型问题

Question

我刚开始使用最新的 Angular 版本。变量 contacts 是一个数组。

现在我的方法出错了：

  ngOnInit(): void {
    this.contactService.getContacts() .subscribe(
      contacts => 
      {
        this.contacts = contacts;
        console.log(this.contacts);
      }
      );

消息显示：

The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead? Type 'Object' is missing the following properties from type 'Contact[]': length, pop, push, concat, and 26 more.ts(2696)

我尝试了很多次来解决这个问题，但没有找到正确的解决方案。

完整代码贴在这里：

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.scss'],
  providers: [ContactService]
})
export class ContactsComponent implements OnInit {
  contacts: Contact[];
  contact: Contact;
  first_name:string;
  last_name:string;
  phone: string;
  constructor(private contactService: ContactService) { }


 

  ngOnInit(): void {
    this.contactService.getContacts() .subscribe(
      contacts => 
      {
        this.contacts = contacts;
        console.log(this.contacts);
      }
      );

    }
}

希望大家帮帮我。

我在这里添加了服务代码模块：

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


@Injectable({
  providedIn: 'root'
})
export class ContactService {

  constructor(private http: HttpClient) { }

  //retrieving ContactService
  getContacts()
  {
    return this.http.get('http://localhost:3002/api/contacts');
   
  }
  //add contact method
  addContact(newContact) {
    var headers = new HttpHeaders();
    headers.append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3002/api/contact', newContact, {headers:headers})
     
      
  }

  //delete methods
deleteContact(id)
{
  return this.http.delete('http://localhost:3002/api/contact'+ id);
}

}

Answer 1

这样试试

更改 contacts 成员属性声明。
像答案中给出的那样更改订阅的响应类型

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.scss'],
  providers: [ContactService]
})
export class ContactsComponent implements OnInit {
  contacts: Array<Contact> = []; // change like this
  contact: Contact;
  first_name:string;
  last_name:string;
  phone: string;
  constructor(private contactService: ContactService) { }


 

  ngOnInit(): void {
    this.contactService.getContacts() .subscribe(
      (contacts: any) => // set response type to any
      {
        this.contacts = contacts;
        console.log(this.contacts);
      }
      );

    }
}

Answer 2

正确的方法是输入服务函数的return：

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

更进一步，HttpClient 的 get 方法是通用类型的，因此您可以这样建议 return 类型：

this.http.get<Contact[]>(url);

然后您可以在调用组件中键入您的声明：

 this.contactService.getContacts() .subscribe(
  (contacts: Contact[]) => 
  {
    this.contacts = contacts;
    console.log(this.contacts);
  }
  );

}

Angular Component.ts 模块中的对象类型问题

Issue with the Object Type in Angular Component.ts Module

callback

web-frontend

angular