在Angular 6中使用ng2智能表创建服务器端分页

我正在尝试使用该组件。我确实做到了，但我需要在用户单击页面或列进行排序后刷新数据，有没有办法捕获这些事件并刷新数据

table.component.html

表1.service.ts

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

@Injectable()
export class TableService {
  constructor(private http: HttpClient) { }
  url = 'http://localhost:4000';
  getCharacters() {
    return this
            .http
            .get(`${this.url}/characters`);
  }
}

表3.1.ts

export interface Table {
   ticket: String;
   title: String;
   state: String;
   owner: String;
   age: String;
   priority: String;
}

表3.1.ts

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './table.interface';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {

  characters: Table[];
  settings = {
        columns: {
          ticket: {
            title: 'Ticket',
            filter: false
          },
          title: {
            title: 'Title',
            filter: false
          },
          state: {
            title: 'State',
            filter: false
          },
          owner:{
            title: 'Owner',
            filter: false
          },
          age:{
            title: 'Age',
            filter: false
          },
          priority:{
            title: 'Priority',
            filter: false
          }
        },
        actions:{
          columnTitle: '',
          add: false,
          edit: false,
          delete: false
        }
  };    

  constructor(private tservice: TableService) { }

  ngOnInit() {
      this
        .tservice
        .getCharacters()
        .subscribe((data: Table[]) => {
          this.characters = data;
      });
  }
}

import { Component, OnInit } from '@angular/core';
import { TableComponent } from '../../utils/table/table.component';

@Component({
  selector: 'app-ticket-item-list',
  templateUrl: './ticket-item-list.component.html',
  styleUrls: ['./ticket-item-list.component.scss']
})
export class TicketItemListComponent implements OnInit {

  pagination = {
    TotalItems: 100,
    CurrentPage: 1,
    PageSize: 10,
    TotalPageLinkButtons: 5,
    RowsPerPageOptions: [10, 20, 30, 50, 100]
  };

  /* Paging Component metod */
  myChanges(event) {
    this.pagination.CurrentPage = event.currentPage;
    this.pagination.TotalItems = event.totalItems;
    this.pagination.PageSize = event.pageSize;
    this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
  }

  constructor() { }

  ngOnInit() {
  }

}

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Table } from './table.interface';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {

  characters: Table[];
  settings = {
        columns: {
          ticket: {
            title: 'Ticket',
            filter: false
          },
          title: {
            title: 'Title',
            filter: false
          },
          state: {
            title: 'State',
            filter: false
          },
          owner:{
            title: 'Owner',
            filter: false
          },
          age:{
            title: 'Age',
            filter: false
          },
          priority:{
            title: 'Priority',
            filter: false
          }
        },
        actions:{
          columnTitle: '',
          add: false,
          edit: false,
          delete: false
        }
  };    

  constructor(private tservice: TableService) { }

  ngOnInit() {
      this
        .tservice
        .getCharacters()
        .subscribe((data: Table[]) => {
          this.characters = data;
      });
  }
}

import { Component, OnInit } from '@angular/core';
import { TableComponent } from '../../utils/table/table.component';

@Component({
  selector: 'app-ticket-item-list',
  templateUrl: './ticket-item-list.component.html',
  styleUrls: ['./ticket-item-list.component.scss']
})
export class TicketItemListComponent implements OnInit {

  pagination = {
    TotalItems: 100,
    CurrentPage: 1,
    PageSize: 10,
    TotalPageLinkButtons: 5,
    RowsPerPageOptions: [10, 20, 30, 50, 100]
  };

  /* Paging Component metod */
  myChanges(event) {
    this.pagination.CurrentPage = event.currentPage;
    this.pagination.TotalItems = event.totalItems;
    this.pagination.PageSize = event.pageSize;
    this.pagination.TotalPageLinkButtons = event.totalPageLinkButtons;
  }

  constructor() { }

  ngOnInit() {
  }

}

parent.component.html

---

您可以使用ng2智能表LocalDataSource进行筛选、设置筛选器和添加筛选器等，以便将服务结果存储在LocalDataSource对象中。在您的init中，类似于： this.characters=新的LocalDataSource（tableService.getCharacters（））

---

以下是供参考的源代码：

对于分页，请使用

setPaging

like

this.YourlocalDataSource.setPaging(1, 10, true);

1

是页面，

10

是每页的行数，

---

true

forces呈现页面

能否请您分享一个代码示例，我来自angular 1，它有点复杂，tu理解tsurl提供的未找到，404工作URL谢谢您的问题。你有什么搜索条件吗？如果是，请与我们分享，您如何跟踪搜索条件的更改？