Olá, tudo bem? Minha implementação é diferente apenas nos nomes.
O componente que lista as fotos é o PhotosComponent O componente que arruma em linhas é o PhotoListComponent
Quando a rotina chega no agruparFotos(), ele lê o array de origem e cria o novo array, mas os itens ficam todos como NULL. Por isso a tela de saída fica só com os espaços...
photo-list.component.ts
export class PhotoListComponent implements OnChanges {
constructor( private logService: LogService) { }
@Input() photos: Photo[] = [];
photosRow: any[] = [];
ngOnChanges( changes: SimpleChanges) {
if (changes.photos) {
this.photosRow = this.agruparFotos( this.photos ) ;
}
}
agruparFotos( photos: Photo[] ) {
const newRows = [] ;
this.logService.consoleLog( 'Array de Fotos: ' + photos.length.toString() );
for (let index = 0; index < photos.length; index += 3) {
this.logService.consoleLog( 'Original Foto ' + index + ' ' + photos[index].description);
newRows.push( photos.slice( index, index + 3 ) );
// this.logService.consoleLog( 'NEWROWS Foto ' + index.toString + ' ' + newRows[index].description);
}
this.logService.consoleLog( 'Array de Fotos Agrupadas: ' + newRows.length.toString() );
return newRows ;
}
}
Essa linha comentada no agruparFotos, mostra UNDEFINED. e dá erro de execução.
photo-list.component.html
<div *ngIf="photosRow.length>0">
<ol class="list-unstyled">
<li *ngFor="let cols of photosRow" class="row">
<div *ngFor="let celulas of cols" class="col-4">
<app-photo
[url]="photosRow.url"
[description]="photosRow.description">
</app-photo>
</div>
</li>
</ol>
</div>
photoscomponent.ts
export class PhotosComponent implements OnInit /*, OnChanges*/ {
photos: Photo[] = [];
constructor(
private photosService: PhotosService,
private logService: LogService,
private activatedRoute: ActivatedRoute ) {
logService.consoleLog('Construtor das Fotos');
}
ngOnInit() {
const usuarioFotos = this.activatedRoute.snapshot.params.login ;
if ( !isUndefined(usuarioFotos)) {
this.photosService
.listFromUser(usuarioFotos)
.subscribe( retPhotos => {
if (retPhotos.length > 0) {
this.photos = retPhotos;
} else {
this.logService.consoleLog('Usuário ' + usuarioFotos + ' não possui fotos a exibir');
}
});
}
}
photoscomponent.html
<app-photo-list [photos]="photos"></app-photo-list>