Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Paginação - Botão "Load More"

Referente ao curso Angular parte 1: produtividade e organização com framework SPA, no capítulo Melhorando a experiência do usuário e atividade LoadButton

por Ana Paula Fagundes Gomes
| 76.1k xp | 33 posts
Estagiária

Oi gente, seguindo os passos do professor, cheguei ao ponto em que o botão Load More não consegue aparecer mesmo havendo duas páginas de dados na API. O erro que aparece chega a ser até estranho.

ERROR TypeError: _this.photos.concat is not a function
    at SafeSubscriber._next (photo-list.component.ts:43)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:253)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:191)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:129)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:81)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:85)
    at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:136)

photo-list.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { Photo } from '../photo/photo';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { PhotoService } from '../photo/photo.service';

@Component({
  selector: 'ap-photo-list',
  templateUrl: './photo-list.component.html',
  styleUrls: ['./photo-list.component.css']
})
export class PhotoListComponent implements OnInit, OnDestroy {
  photos: Photo[] = [];
  filter: string = '';
  debounce: Subject<string> = new Subject<string>();
  hasMore: boolean = false;
  currentPage: number = 0;
  userId: number = 0;

  constructor(
    private actvatedRoute: ActivatedRoute,
    private photoService: PhotoService
  ) { }

  ngOnInit(): void {
    this.userId = this.actvatedRoute.snapshot.params.userId;
    this.photos = this.actvatedRoute.snapshot.data['photos'];
    this.debounce
      .pipe(debounceTime(300))
      .subscribe(filter => this.filter = filter);
  }

  ngOnDestroy(): void {
    this.debounce.unsubscribe();
  }

  load() {
    this.photoService
        .listFromUserPaginated(this.userId, ++this.currentPage)
        .subscribe(photos => {
            this.photos = this.photos.concat(photos);
            if(!photos.length) this.hasMore = false;
        });
  }
}
3 respostas
solução!
por Ana Paula Fagundes Gomes
| 76.1k xp | 33 posts
Estagiária

Resolvido! :D

por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Ana Paula! Como vai?

Vc poderia compartilhar com a gente o que estava causando o problema e como conseguiu resolvê-lo? Assim se outra pessoa estiver na mesma situação que vc no futuro, poderá encontrar uma luz no seu tópico!

Grande abraço e bons estudos, minha aluna!

por Ana Paula Fagundes Gomes
| 76.1k xp | 33 posts
Estagiária

Olá! O meu caso em específico é uma API própria que utiliza a paginação em SpringBoot.

Por este motivo o retorno coloca os dados dentro de um array content. 

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

A resolução foi inserir content na frente de photos :D

load() {
    this.photoService
      .listFromUserPaginated(this.userId, ++this.currentPage)
      .subscribe(photos => {
        this.filter = '';
        this.photos.content = this.photos.content.concat(photos.content);
        if(!photos.content.length) this.hasMore = false;
      });
  }