1
resposta

Imagens não carregam pois os atributos url e description não são reconhecidos

Esse erro não para de aparecer para mim e as imagens da API não são carregadas. Poderiam me ajudar?

Compiled with problems:X

ERROR

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

4 [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:5:24 - error TS2339: Property 'description' does not exist on type 'Object'.

5 [description]="photo.description"

                     ~~~~~~~~~~~

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

Esse é o meu código, perceba que fiz vários testes e os deixei comentados...

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  /* 
  photos = [
    { 
      url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Sultan_the_Barbary_Lion.jpg/440px-Sultan_the_Barbary_Lion.jpg', 
      description: 'Leão'
    },
    { 
      url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Lioness_Etosha_NP.jpg/500px-Lioness_Etosha_NP.jpg', 
      description: 'Leoa'
    },
    { 
      url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2d/Lioness_Etosha_NP.jpg/500px-Lioness_Etosha_NP.jpg', 
      description: 'Leoa'
    }         
  ];
  */  

  /*
    photos: Object[] = [];

    constructor(http: HttpClient) {

      http
        .get<Object[]>('http://localhost:3000/flavio/photos')
        .subscribe(
          photos => this.photos = photos,
          err => console.log(err.message)     
        );           
    }
    */

    photos: Object[] = [];
    constructor(http:HttpClient) {

      http
        .get<Object[]>('http://localhost:3000/flavio/photosx')
        .subscribe(
            photos => this.photos = photos,
            err => console.log(err)
        );
    }
}
1 resposta

Você deve está suando um versão mais atual do typescript por isso o esse problema. Cria uma interface com as propriedades do array da api. Segue o exemplo:

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

interface Array{
  url: string;
  description:string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'alurapic';

  photos:Array[] = [];

  constructor(http: HttpClient){

    http
    .get<Array[]>('http://localhost:3000/flavio/photos')
    .subscribe(photos => this.photos = photos);

  }

}

Coloque esse código no seu app.component.ts que deve funcionar.

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