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

Erro de cache apos agrupamento e uso do OnChanges

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);
  }
}
3 respostas
solução!

Fala ai Leonardo, tudo bem? O problema está na função groupColumns do PhotosComponent.

Vamos olhar o código atual:

groupColumns(photos:any[]){
    const newRows = [];

    for(let i = 0; i<photos.length; i+3){
      newRows.push(photos.slice(i, i + 3));
    }
    return newRows;
  }

Repare especificamente na declaração do for:

for(let i = 0; i<photos.length; i+3)

Na última condição você está pegando o valor do i e somando com 3, mas, não está atribuindo a soma para nenhum lugar, sendo assim, o loop será infinito.

Apenas faltou adicionar um = após o +, ficando:

for(let i = 0; i<photos.length; i+=3)

E a função completa:

groupColumns(photos:any[]){
    const newRows = [];

    for(let i = 0; i<photos.length; i+=3){
      newRows.push(photos.slice(i, i + 3));
    }
    return newRows;
  }

Obs: Parabéns pela iniciativa de ter subido o projeto no Github e nos enviado, isso ajuda demais, nos permitindo simular o problema em nossa máquina.

Espero ter ajudado.

bah ! achei que tinha olhado por tudo no código.. pelo visto não tudo kkkkk

Muito obrigado!

Sempre acontece, faz parte kkkk

Magina Leonardo, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.