Após as mudanças no código o navegador não consegue carregar as fotos da api demora no carregamento e após um tempo ele da um erro de cache
Quando acesso a url user/flavio ou o almeida ele dá esse erro, não carregando nem o favicon da aplicação (que é o logo do angular) quando acessado essa url.. nas demais funciona normalmente, e caso a api esteja off carrega a pagina sem problemas
o erro que aparece no console é o seguinte:
uncaught exception: out of memory zone.js:504
invokeTask zone.js:504
invokeTask zone.js:1744
globalZoneAwareCallback zone.js:1781
já subi o projeto no github https://github.com/AngelicoLeo/Projeto-Angular
mas mando aqui também o código
photos.component.ts:
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'ap-photos',
templateUrl: './photos.component.html',
styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnChanges {
constructor() { }
@Input()photos: any[] = [];
rows: any[] = [];
ngOnChanges(changes: SimpleChanges) {
if(changes.photos){
this.rows = this.groupColumns(this.photos);
}
}
groupColumns(photos:any[]){
const newRows = [];
for(let i = 0; i<photos.length; i+3){
newRows.push(photos.slice(i, i + 3));
}
return newRows;
}
}
photo.component.html:
<ol class="list-unstyled">
<li *ngFor="let cols of rows" class = "row" >
<div *ngFor="let photo of cols" class = "col-4">
<ap-photo
[url]="photo.url"
[description]="photo.description">
</ap-photo>
</div>
</li>
</ol>
photo-list.component.ts:
import { Component, OnInit } from '@angular/core';
import { PhotoService } from '../photo/photo.service';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'ap-photos-list',
templateUrl: './photos-list.component.html',
styleUrls: ['./photos-list.component.css']
})
export class PhotosListComponent implements OnInit {
photos:Object[] = [];
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);
}
}