Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Template não localiza propriedades

Boa noite, estou com um erro no template do AppComponent, que informa que url e description não são propriedades de Object[]

Erro:

ERROR in src/app/app.component.html:3:48 - error TS2339: Property 'url' does not exist on type 'Object[]'.

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

  src/app/app.component.ts:7:16
    7   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:3:75 - error TS2339: Property 'description' does not exist on type 'Object[]'.

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

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

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Essa é minha classe AppComponent:

export class AppComponent {
  title = 'alurapic';
  photos: Object[] = [];

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

}

E esse meu template do AppComponent:

<h1>Alura</h1>

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

Revi o código do vídeo algumas vezes, e vejo que a variável photos está realmente como um Object[], não consigo entender por qual motivo o código do instrutor roda normalmente e o meu não compila.

3 respostas
solução!

Fala ai Elvis, tudo bem? Isso acontece por conta da tipagem do TypeScript, onde, por padrão a interface Object não tem as propriedades que você precisa, no caso a url e description.

Você pode resolver de duas maneiras, uma seria tipar seu photos com any ou criar uma interface Photo que declare essas duas ou mais propriedades e tipá-la no array de photos.

O ideal seria resolver através da segunda opção.

Espero ter ajudado.

Boa noite Matheus,

Ajudou sim, mas ainda ficou uma dúvida.

Saberia me dizer por qual motivo utilizar o Object[] funcionou para o instrutor durante a aula e para mim não? Pode ser algo com a versão do Angular?

Fala Elvis, pode ser versão do TypeScript, a versão utilizada no curso é mais antiga então algumas interfaces podem ter mudado.

Espero ter ajudado.