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>