5
respostas

Não aparece a lista de flávio, fica em branco.

esse é o photo-list.component

constructor(
    private photoService: PhotoService,
    private activatedRoute: ActivatedRoute
  ){}

  ngOnInit(): void {
    const userName = this.activatedRoute.snapshot.params.userName;
    this.photoService.listFromUser(userName).subscribe(photos => this.photos = photos);
  }

Esse é o photo service

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

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

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

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

Fala ai Karoline, tudo bem? Olhando os códigos, ambos parecem estarem corretos, mas, posso estar deixando passar algum pequeno detalhe.

Por conta disso, posso pedir um favor? Compartilha o projeto comigo, assim eu consigo subir ele por aqui e analisar com mais calma.

Outro detalhe: Tente logar o valor do userName dentro do seu ngOnInit:

ngOnInit(): void {
    const userName = this.activatedRoute.snapshot.params.userName;
    console.log(userName);
    this.photoService.listFromUser(userName).subscribe(photos => this.photos = photos);
}

E veja o que será impresso.

Tente também inspecionar a requisição, como ela foi feita e o que retornou, isso pode ser feito abrindo o console do navegador e navegando até a aba Network (Rede). Provavelmente vai haver uma linha referente a requisição para a API.

Espero ter ajudado.

Failed to load resource: net::ERR_CONNECTION_REFUSED core.js:6014 ERROR HttpErrorResponse está dando esse erro.

Como compartilho o projeto contigo?

A API está rodando? Você subiu o servidor? Parece que ele não conseguiu bater na API.

Verifique se o endereço da API e porta estão corretos.

Pode compartilhar pelo Github ou Google Drive (zipado).

Espero ter ajudado.

Méu código tá aqui.. https://github.com/karoliness/AlurapicAlura

Fala ai Karoline, tudo bem? Testei o seu projeto e o mesmo funcionou certinho.

Acho que o problema era a API mesmo, provavelmente ela não estava rodando no momento que você executou o front.

Da uma olhada nessa atividade (caso já não tenha dado):

https://cursos.alura.com.br/course/angular-fundamentos/task/38530

Espero ter ajudado.