2

Problema com ngx-infinite-scroll

#Angular #TypeScript
U
Uriel Azevedo

Estou fazendo um curso de angular intermediário, segui a vídeo-aula mas mesmo assim não funciona, o problema é que ele chama toda a função menos a função onScroll() na qual era pra ser chamada pela biblioteca do ngx-infinite-scroll no html pela proprieda (scrolled)="onScroll()". Vou mandar os código logo abaixo:


listagem-filmes.component.html:

<mat-toolbar class="app-title">Filmes Cadastrados</mat-toolbar>

<div class="home-content">

  <mat-card class="home-card"

            *ngFor="let filme of filmes"

            infiniteScroll

            (scrolled)="onScroll()">

    <mat-card-header>

      <div mat-card-avatar></div>

      <mat-card-title>{{filme.titulo}}</mat-card-title>

      <mat-card-subtitle>{{filme.genero}}</mat-card-subtitle>

    </mat-card-header>

    <img mat-card-image [src]="filme.urlFoto">

    <mat-card-content>

      <p>

        {{filme.descricao}}

      </p>

    </mat-card-content>

    <mat-card-actions>

      <button color="accent" mat-raised-button>ABRIR</button>

    </mat-card-actions>

  </mat-card>

</div>


listagem-filmes.component.ts:

import { ComponentOnInit } from '@angular/core';

import { FilmesService } from 'src/app/core/filmes.service';

import { Filme } from 'src/app/shared/models/filme';


@Component({

  selector: 'dio-listagem-filmes',

  templateUrl: './listagem-filmes.component.html',

  styleUrls: ['./listagem-filmes.component.scss']

})

export class ListagemFilmesComponent implements OnInit {


  

  readonly qtdPagina = 4;

  paginanumber = 0;

  filmesFilme[] = [];


  constructor(private filmesServiceFilmesService) { }


  ngOnInit(): void {

    this.listarFilmes();

  }


  onScroll(): void {

    this.listarFilmes();

  }

  

  private listarFilmes(): void {

    this.pagina++;

    this.filmesService.listar(this.paginathis.qtdPagina)

        .subscribe((filmesFilme[]) => this.filmes.push(...filmes));

  }

}


filmes.service.ts:

import { Injectable } from '@angular/core';

import { HttpClientHttpParams } from '@angular/common/http';

import { Observable } from 'rxjs';

import { Filme } from '../shared/models/filme';


const url = 'http://localhost:3000/filmes/';


@Injectable({

  providedIn: 'root'

})

export class FilmesService {

  

  constructor(private httpHttpClient) { }


  salvar(filmeFilme): Observable<Filme> {

    return this.http.post<Filme>(urlfilme);

  }


  listar(paginanumberqtdPaginanumber): Observable<Filme[]> {

    let httpParams = new HttpParams();

    httpParams = httpParams.set('_page'pagina.toString());

    httpParams = httpParams.set('_limit'qtdPagina.toString());

    return this.http.get<Filme[]>(url, {params: httpParams});

  }

}


Se alguém puder me ajudar ficaria muito grato.

1
18

Comentários (1)

0
Carlos Inhani

Carlos Inhani

01/03/2021 14:45

O sua função listar esta errada vc esta chamando duas vezes o httpParams vc tem concatena eles


listar(paginanumberqtdPaginanumber): Observable<Filme[]> {

    let httpParams = new HttpParams();

    httpParams.set('_page'pagina.toString()).set('_limit'qtdPagina.toString());

    return this.http.get<Filme[]>(url, {params: httpParams});


acredito desse jeito vai dar certo blz me avisa se vc conseguio blz

None

Brasil