Question

我对离子3上的InfiniteScroll有问题。当我到达页面底部时，新数据正确加载，但之后没有显示，它们会替换旧的缩略图。你能帮助我吗？

提供商 - ＆gt; TMDB-service.ts

    // Core companents
import { HttpClient } from '@angular/common/http';
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

// RxJS

import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs/Observable';

// Models //
import {TmdbConfig} from '../models/config/tmdb-config-model';
import {TmdbSearch} from '../models/movie/search/tmdb-search-model';

/*
  Generated class for the ThemoviesdbServicesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class TmdbServices {
  configMovie: TmdbConfig[];
  searchMovie: TmdbSearch[];
  baseUrlConfig: string;

  private baseUrl: string = 'https://api.themoviedb.org/3/';
  private apiConf : string = 'configuration';
  private apiSearch : string = 'search/movie';

  private apiKey: string = '?api_key=078016f3132847b07af647afd854c75e';

    constructor(private http: Http, private http1: HttpClient) {
      this.getConfig()
          .subscribe(
                  (config: TmdbConfig[]) => {
                      this.configMovie = config;
                      // Any other code here
                      this.baseUrlConfig = this.configMovie['images']['base_url'] + this.configMovie['images']['poster_sizes'][3];
                      console.log(this.configMovie);
                      console.log(this.baseUrlConfig);
                  },
                  (error: any) => this.errorMessage = <any>error);
    }

    ngOnInit(): void {

        }


  public getConfig(): Observable<TmdbConfig[]> {

    const url = `${this.baseUrl}${this.apiConf}${this.apiKey}`;

    return this.http1.get<TmdbConfig[]>(url)
  }

  public getMovies(arg, arg1, arg2, arg3): Observable<TmdbSearch[]> {

    const url = `${this.baseUrl}${this.apiSearch}${this.apiKey}&language=${arg}&query=${arg1}&page=${arg2}&include_adult=${arg3}`;

    return this.http1.get<TmdbSearch[]>(url);
  }

  public searchGetMovie(arg, arg1, arg2, arg3) {
        this.getMovies(arg, arg1, arg2, arg3)
          .subscribe(
                  (search: TmdbSearch[]) => {
                      this.searchMovie = search;
                      console.log(this.searchMovie)
                    },
                  (error: any) => this.errorMessage = <any>error);
  }

}

下面的代码检索数据。

Film.html

  <button ion-button full color="light" (click)="tmdbServices?.searchGetMovie(language, inputSearch, page, adulte)">
        OK
  </button>

  <ion-grid>
    <ion-row>
      <ion-col col-sm *ngFor="let results of tmdbServices?.searchMovie?.results">
        <ion-card>
          <ng-container *ngIf="results.poster_path === null; then noJaquette else realJaquette"></ng-container>
            <ng-template #realJaquette><img (click)="choiceGetMovie(results.id, language, $event)" [src]="tmdbServices.baseUrlConfig + results.poster_path" /></ng-template>
            <ng-template #noJaquette><img (click)="choiceGetMovie(results.id, language, $event)" src="./assets/imgs/no-image.png" /></ng-template>
          <ion-card-content>
            <ion-card-title>
              {{ results.title }}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

Film.ts

    // Components //
import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';

// Providers //
import {TmdbServices} from '../../providers/tmdb-services';

// Models //
import {TmdbConfig} from '../../models/config/tmdb-config-model';
import {TmdbSearch} from '../../models/movie/search/tmdb-search-model';
/**
 * Generated class for the FilmPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-film',
  templateUrl: 'film.html',
})

export class FilmPage {

  errorMessage;
    inputSearch: string;
    page: number = 1;
    adulte: boolean = false;
    language: string = "fr-FR";

  constructor(public navCtrl: NavController, public navParams: NavParams, private tmdbServices: TmdbServices) {}


  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 1; i < 5; i++) {

         this.tmdbServices.searchGetMovie(this.language, this.inputSearch, i, this.adulte);
         this.tmdbServices.searchMovie['results'].push( this.tmdbServices.searchMovie['results'].length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }  

}

你能帮我解决这个问题吗？

谢谢

Answer 1

无限滚动是分页的流行替代方法。它具有与分页相同的功能，用于限制视图上显示的数据列表。

请参阅此链接： https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

Ionic 3 InfiniteScroll

1 个答案: