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

Problema na execução do SLICE

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>
2 respostas

Oi Leonardo tudo bem?

Poderia, por gentileza, colocar a pasta do seu projeto no github? Assim podemos analisar melhor o que está acontecendo.

solução!

Descobri onde estava o problema: no html

<div *ngIf="photosRow.length>0">
  <ol class="list-unstyled">
    <li *ngFor="let row of photosRow" class="row">
      <div *ngFor="let photo of row" class="col-4">
        <app-photo
          [url]="photo.url"
          [description]="photo.description">
        </app-photo>
      </div>
    </li>
  </ol>
</div>