1
resposta

[Bug] Erro ao consumir API e executar HttpClient

Segui o código igual do professor, porém quando ele apaga os itens do array photos, meu código da erro, decidi prosseguir mesmo assim, porém o erro persiste e parece que não consome a api

Meu codigo :

app.components.ts

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  photos: Object[] = []

  constructor(http: HttpClient) {
    http
      .get<Object[]>('http://localhost:3000/flavio/photos')
      .subscribe(photos => {
        console.log(photos)
        this.photos = photos
      })
  }

}

app.component.html

<ap-photo 
    *ngFor="let photo of photos" 
    [url]="photo.url" 
    [description]="photo.description">
</ap-photo>

Erro:

Compiled with problems:X

ERROR

src/app/app.component.html:3:18 - error TS2339: Property 'url' does not exist on type 'Object'.

3     [url]="photo.url"
                   ~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


ERROR

src/app/app.component.html:4:26 - error TS2339: Property 'description' does not exist on type 'Object'.

4     [description]="photo.description">
                           ~~~~~~~~~~~

  src/app/app.component.ts:6:16
    6   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
1 resposta

Olá Vitoria, tudo bem?

Talvez seja algum problema com a tipagem do array. Para resolver, crie um arquivo dentro da pasta photo chamado photo.ts que será uma interface. Nele, insira o código abaixo:

export interface Photo {
    id:number;
    postDate:Date;
    url:string;
    description:string;
    allowComments:boolean;
    likes:number;
    comments:number;
    userId:number;
}

Agora, mude o tipo do array de photos de Object[] para Photo[] e faça a importação da interface no AppComponent, assim:

photos: Photo[] = []

import { Photo } from ../../photo/photo

Agora, verifique se os erros sumiram. Se não resolver, continuamos à disposição para ajudar.

Abraços, bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado. ✓

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software