sql >> データベース >  >> NoSQL >> MongoDB

角度5で無限スクロールページネーションを実装する方法は?

    ngx-infinite-scrollを使用できます 。

    npm install ngx-infinite-scroll --save
    

    デモを見る plnkr

    コンポーネントテンプレート内:

    <div class="search-results"
         data-infinite-scroll
         debounce
         [infiniteScrollDistance]="scrollDistance"
         [infiniteScrollUpDistance]="scrollUpDistance"
         [infiniteScrollThrottle]="throttle"
         (scrolled)="onScrollDown()"
         (scrolledUp)="onUp()">
      <p *ngFor="let i of array">
        {{ i }}
      </p>
    </div>
    

    コンポーネントコントローラの場合:

     onScrollDown (ev) {
        console.log('scrolled down!!', ev);
    
        // add another 10 items
        const start = this.sum;
        this.sum += 10;
        this.appendItems(start, this.sum);
    
        this.direction = 'down'
      }
    
      onUp(ev) {
        console.log('scrolled up!', ev);
        const start = this.sum;
        this.sum += 10;
        this.prependItems(start, this.sum);
    
        this.direction = 'up';
      }
    

    これは単純なデータサービスで実行されますが、データベースからデータを取得するカスタムメソッドを実装できます。例:

    // Page 1
    db.comments.find().limit(10)
    
    // Page 2
    db.comments.find().skip(10).limit(10)
    
    // Page 3
    db.comments.find().skip(10).limit(10)
    



    1. オブジェクトのマングーススキーマ配列

    2. マングースでObjectIdを生成するにはどうすればよいですか?

    3. AmazonEC2にMongoDBをデプロイするための6つのベストプラクティス

    4. スプリングブートを使用してmongodbの自動生成フィールドを作成するにはどうすればよいですか?