Consumindo uma API pessoal - paginação

Oi professor!

A minha paginação na API está correta, retornando sempre 3 itens por página. Exemplo:

http://localhost:8080/item?wishId=1&page=0

Retorno

{
  "content": [
    {
      "id": 1,
      "name": "Imagem X",
      "description": "Jake",
      "wishlistId": 1,
      "image": "https://avatarfiles.alphacoders.com/153/153393.png"
    },
    {
      "id": 2,
      "name": "Imagem X",
      "description": "BMO",
      "wishlistId": 1,
      "image": "https://i.redd.it/1kof1qtpx5fz.jpg\r\n"
    },
    {
      "id": 3,
      "name": "Imagem X",
      "description": "Finn e Jake",
      "wishlistId": 1,
      "image": "https://avatarfiles.alphacoders.com/114/114696.jpg"
    }
  ],
  "pageable": {
    "sort": {
      "unsorted": false,
      "sorted": true,
      "empty": false
    },
    "offset": 0,
    "pageSize": 3,
    "pageNumber": 0,
    "paged": true,
    "unpaged": false
  },
  "totalPages": 2,
  "totalElements": 4,
  "last": false,
  "number": 0,
  "size": 3,
  "sort": {
    "unsorted": false,
    "sorted": true,
    "empty": false
  },
  "numberOfElements": 3,
  "first": true,
  "empty": false
}

O problema é que na hora de colocar a paginação seguindo o exemplo dado em aula ele da problema na geração de colunas do bootstrap.

Erro

ERROR TypeError: Cannot read property 'length' of undefined
    at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.groupColumns (photos.component.ts:24)
    at PhotosComponent../src/app/photos/photo-list/photos/photos.component.ts.PhotosComponent.ngOnChanges (photos.component.ts:18)
    at checkAndUpdateDirectiveInline (core.js:9239)

Photos.component.ts

export class PhotosComponent implements OnChanges {

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

  constructor() { }

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

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

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

    return newRows;
  }

}

Photo.service.ts

listFromUserPaginated(wishId: number, page: number) {
        const params = new HttpParams()
            .append('page', page.toString())
            .append('wishId', wishId.toString());

        return this.http
            .get<Photo[]>(API + '/item', { params });
    }

Alguma ideia para funcionar? Obrigada!