Проблема с типом объекта в модуле Angular Component.ts

Я только что начал с новейшей версии Angular. Переменная contacts представляет собой массив.

Теперь у меня есть ошибка с методами:

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

Сообщение показывает:

Тип «Объект» можно присвоить очень немногим другим типам. Вы хотели вместо этого использовать тип «любой»? В типе «Объект» отсутствуют следующие свойства типа «Контакт []»: длина, всплывающее окно, push, concat и еще 26.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);
}

}

person eden1996    schedule 21.07.2020    source источник
comment
Можете ли вы создать stackblitz, чтобы я мог помочь вам лучше stackblitz.com   -  person Santosh Shinde    schedule 21.07.2020
comment
Измените только объявление контактов: Contact[]; как контакты: любой = {} или контакты: любой = []   -  person surendra kumar    schedule 21.07.2020
comment
Вы не должны менять Object на any. Вы заменяете меньшее зло большим злом. Рефакторинг getContacts() для возврата Contact[] вместо этого.   -  person Mike S.    schedule 21.07.2020
comment
Я думаю, что есть проблема в том, что вы возвращаете вызовы API, пожалуйста, также опубликуйте код службы .. !!   -  person kushal Baldev    schedule 21.07.2020
comment
Возвращает ли contactService.getContacts() наблюдаемый‹массив›? Я думаю, что это может быть ваша проблема   -  person Brendan B    schedule 21.07.2020
comment
Спасибо за вашу помощь. @BrendanB правильно, contactService.getContacts() возвращает наблюдаемый‹массив›.   -  person eden1996    schedule 21.07.2020


Ответы (2)


Попробуйте так

  1. Изменить объявление свойства члена contacts.
  2. Изменить тип ответа на подписку, как указано в ответе
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);
      }
      );

    }
}
person Santosh Shinde    schedule 21.07.2020
comment
Уважаемый Сантош, это было полезно, и вы решаете эту проблему. - person eden1996; 21.07.2020

Правильным способом было бы ввести возврат вашей сервисной функции:

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

Идя немного дальше, метод get HttpClient имеет общий тип, поэтому вы можете предложить тип возвращаемого значения следующим образом:

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

Затем вы можете ввести свое объявление в вызывающем компоненте:

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

}
person Alex    schedule 21.07.2020
comment
Спасибо Алекс за помощь. Я попробую это обязательно. Очень полезные советы. - person eden1996; 22.07.2020
comment
Я должен упомянуть, что это рекомендуемый способ, хотя использование любого набора текста — это последнее, что вы обычно хотите делать ;) - person Alex; 23.07.2020