时间戳

首页 > 解决方案 > 点击角度的下一个内容

javascript - 点击角度的下一个内容

问题描述

如何在点击时显示以下内容？

我有一个内容列表显示到 20 点，然后单击我想显示其余内容

我为此创建了 nextMovieList 方法

import { Component, OnInit } from '@angular/core';
import { MoviesService, Movie } from './shared/services/movies.services';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

  title = 'app-entretien';
  moviesList: Movie[];
  moviesSelected: Movie[];

  currentPage: number = 0;

  constructor(private moviesService: MoviesService) {
  }

  ngOnInit() {
    this.moviesService.getList(1, 20).subscribe(data => {
      this.moviesList = data.content;
      console.log(this.moviesList);
    });
  }

  nextMoviesList() {
    if (this.currentPage > this.moviesList.length) {
      this.currentPage++
    }
  }
}

电影服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';


export interface Movie {
  attributes: {
    actors: string; // acteurs
    description: string; // synopsis
    director: string; // réalisateur
    duration: string; // durée en minute
    title: string; // titre
    year: string; // année de sortie
  };
  thumbnails: { // jaquettes
    large: string;
    medium: string;
    small: string;
    tiny: string;
    xlarge: string;
  };
}

export interface ApiReturn<T> {
  code: number;
  content: T[];
  count: number;
  description: string;
  details: string;
  limit: number;
  page: number;
  sort: string;
}

export interface ApiParams extends HttpParams {
  _page: number;
  _limit: number;
}

@Injectable({
  providedIn: 'root'
})
export class MoviesService {

  constructor(private http: HttpClient) {
  }

  getList(page: number, limit: number): Observable<any> {
    return this.http.get('https://api-test.cnx-network.com/api/fuuze/content', 
      { params: { 
          page: page + '', 
          limit: limit + '', 
          category: 'movies',
          sort: 'order'
        }
      });
  }
}

不明白如何实现页码接口 ApiParams 我不想显示特定数量的内容而是所有的内容

标签： javascriptangularapi

解决方案

演示您的 this.movi​​esList.length 是 20 那么为什么要与 paginate 进行比较？您也从 api 发送总计数，然后您可以从该计数创建总分页。在演示中创建一个参数，totalPage然后在第一次调用 ngOnInit

this.totalPage=parseInt((data.total/20).toString());
data.total%20>0 ? this.totalPage++ : this.totalPage;

然后在你的函数中使用它作为比较

nextMoviesList() {
    if(this.totalPage==this.currentPage){return;}  
    this.currentPage++  
    this.moviesService.getList(this.currentPage+1, 20).subscribe(data => {
        this.moviesList = data.content;
    });
}

如果您的服务与 paginate 一起使用，那么在您的nextMoviesList函数调用服务中使用新的页面索引

推荐阅读