0

在我的应用程序中，我使用 isotope-layout npm 模块作为过滤器选项（https://www.npmjs.com/package/isotope-layout）用于分页 ngx-pagination （https://www.npmjs.com/package/ ngx-分页）。但它不能正常工作过滤器选项和分页。我没有收到任何错误，但它不起作用。我不知道如何找到问题所在。如果有人知道，请查看我的演示并帮助我解决此问题。

app.component.html：

    <div *ngFor="let d of pData | paginate: config" class="col-lg-3 col-md-4 all {{d.filter}}">

              <div class="product-item">
                <a href="#"><img src="{{d.img}}" alt=""></a>
                <div class="down-content">
                  <a href="#">
                    <h4>{{d.title}}</h4>
                  </a> 
                  <p>Lorem ipsume dolor sit amet, adipisicing elite. Itaque, corporis nulla aspernatur.</p> 
                </div>
              </div>
            </div>
  <pagination-controls (pageChange)="onPageChange($event)" [maxSize]="maxSize" class="float-right">
  </pagination-controls>

app.component.ts：

import { Component, Renderer2 } from '@angular/core';
declare var $: any;
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';

  public pData: any;
  config: any;
  public maxSize: number = 4;
  p: number = 1;

  constructor(private renderer: Renderer2) {}

  ngOnInit() {

   this.pData = [data will be there];//data

    this.config = {
      itemsPerPage: 4,
      currentPage: 1,
      totalItems: this.pData.length
    };
  }

  onClick(e: any) {
    e.target
      .closest('ul')
      .querySelectorAll('li')
      .forEach((item: any) => {
        this.renderer.removeClass(item, 'active');
      });
    e.target.classList.add('active');
    let data = e.target.getAttribute('data-filter');

    console.log(data);

    var $grid = $('.grid').isotope({
      itemSelector: '.all',
      percentPosition: true,
      masonry: {
        columnWidth: '.all'
      }
    });
    $grid.isotope({
      filter: data
    });
  }

  onPageChange(event: any) {
    this.config.currentPage = event;
  }
}

演示：https ://stackblitz.com/edit/angular-igbxou?file=src%2Fapp%2Fapp.component.ts

4

0 回答 0