Olá, estou enfrentando problemas ao tentar mostrar as fotos da API através da rota, antes estava funcionando agora não mais...
Meu arquivo de rotas:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PhotoListComponent } from './photos/photo-list/photo-list.component';
import { PhotoFormComponent } from './photos/photo-form/photo-form.component';
import { NotFoundComponent } from './errors/not-found/not-found.component';
const routes: Routes = [
{path: 'user/:userName', component: PhotoListComponent},
{path: 'p/add', component: PhotoFormComponent},
{path: '**', component: NotFoundComponent} // para qualquer view inexistente carregue PhotoListComponent
];
@NgModule({
imports: [
RouterModule.forRoot(routes) // tudo a partir do caminho raiz
],
exports:[
RouterModule
]
})
export class AppRoutingModule { }
Meu Component que lista as fotos
import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo/photo.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-photo-list',
templateUrl: './photo-list.component.html',
styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit {
photos: any[] = []; // tipo any significa qualquer
/* Quando o AppComponent for inicializado o método construtor será sempre inicializado */
constructor(
private photoService: PhotoService,
private activatedRoute: ActivatedRoute
) { }
ngOnInit(): void {
const userName = this.activatedRoute.snapshot.params.userName; // coletando dado da rota
this.photoService
.listFromUser(userName)
.subscribe(photos => { // photos => funciona como uma funcao!
console.log(photos[0].description);
this.photos = photos;
}); // o método observable nos notifica sobre os dados recebidos ao fazer a inscricao
}
}
Minha view
<animal-photo
*ngFor="let photo of photos"
[url]="photo.url"
[description]="photo.description">
</animal-photo>