Subscribe

Olá Guilherme,

Compartilha por favor os arquivos app.component.ts e photo.service.ts para conseguirmos te ajudar melhor, ok?

app.component.ts

import { PhotoService } from './photos/photo/photo.service';
import { Component } from '@angular/core';

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

  constructor(photoService: PhotoService) {
    photoService
      .listFromUser('flavio')
      .subscribe((photos) => (this.photos = photos));
  }
}

photo.service.ts

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

const API = 'http://localhost:3000/';

@Injectable({ providedIn: 'root' })
export class PhotoService {
  constructor(private http: HttpClient) {}

  listFromUser(userName: string) {
    this.http.get<Object[]>(API + userName + '/photos');
  }
}

Guilherme, no arquivo photo.service.ts, acrescente a palavra return no método listFromUser(), assim:

photo.service.ts

listFromUser(userName: string) {
    return this.http.get<Object[]>(API + userName + '/photos');
  }

Dessa forma, o método vai retornar um observable e você poderá usar o subscribe.

Acredito que isso solucionará o problema. Mas caso persista, continuo à disposição!

Bons estudos!

Ele parou de aparecer o erro no subscribe, mas deu esse erro no this.photos:

(property) AppComponent.photos: Object[] Type 'Object[]' is not assignable to type 'Object[]'. Two different types with this name exist, but they are unrelated.ts(2719) Type 'Object[]' is not assignable to type 'Object[]'. Two different types with this name exist, but they are unrelated. 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 'Object': url, descriptionts(2719)

Eu tentei mudar o interface Object pra Array e mudar a chamada que existem 2 Object, mas ai ele aparece um erro no html

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

any Property 'description' does not exist on type 'Object'.ngtsc(2339) app.component.ts(5, 14): Error occurs in the template of component AppComponent.

Há algum problema colocar photos: any[] = []; ?

Troquei por any e ele apareceu a lista de fotos, mas esse código ficou sem ser chamado:

interface Object {
  url: string;
  description: string;
}

interface Object 'Object' is declared but never used.ts(6196)

Pode tipar com any por enquanto, Guilherme.

Na aula - Tipando nossa API, o professor Flávio vai criar uma interface para Photo e você vai poder usá-la para a tipagem específica.