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

As fotos não estão aparecendo após alterações da última aula:

Depois de implementar o NgOnChanges no código, as imagens ficam "undefined", e aparece esse erro no console:

GET http://localhost:4200/null 404 (Not Found)

photos.component.ts

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { Photo } from '../../photo/photo';

@Component({
  selector: 'ap-photos',
  templateUrl: './photos.component.html',
  styleUrls: ['./photos.component.css']
})
export class PhotosComponent implements OnChanges {

  @Input() arrayPhotos: Photo[] = [];
  rows: any[] = [];

  constructor() { }

  ngOnChanges(changes: SimpleChanges){
    if(changes.arrayPhotos)
      this.rows = this.groupColumns(this.arrayPhotos);
  }

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

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

}

photos.component.html

<ol class="list-unstyled">
    <li *ngFor="let cols of rows" class="row">
        <div *ngFor="let photo of rows" class="col-4">
            <ap-photo 
                [url]="photo.url" 
                [description]="photo.description">
            </ap-photo>     
        </div>
    </li>
</ol>
2 respostas

Fala aí Daniel, tudo bem? Olhando o código, parece estar correto, consegue subir o código no GH (caso já não esteja), assim fica melhor para eu simular o projeto e tentar verificar o erro.

Fico no aguardo.

solução!

Bom dia, Matheus.

Obrigado pelo retorno. Eu já corrigi o erro, mas o código está em casa, se me lembro a causa era devido a linha abaixo. O ngFor da div deve ser "let photo of COLS":

<ol class="list-unstyled">
    <li *ngFor="let cols of rows" class="row">
        <div *ngFor="let photo of rows" class="col-4">
            <ap-photo 
                [url]="photo.url" 
                [description]="photo.description">
            </ap-photo>     
        </div>
    </li>
</ol>