分页不起作用

Question

我正在处理一个列表，我希望使用@ cmglez10 / ng-datatable的数据依赖关系设置每个页面的20个数据。我的问题是我的数据不是列表，因为我每页设置20行。可以有人解决我的问题问题

以下是代码。

/*employee-list.component.ts*/
import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee.model';
import { ToastrService } from 'ngx-toastr';


@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  employeeList: Employee[];
  constructor(private employeeService: EmployeeService, private tostr: ToastrService,
  ) { }

  ngOnInit() {
    var x = this.employeeService.getData();
    x.snapshotChanges().subscribe(item => {
      this.employeeList = [];
      item.forEach(element => {
        var y = element.payload.toJSON();
        y["$key"] = element.key;
        this.employeeList.push(y as Employee);
       
      });
    });


    
  }

  onEdit(emp: Employee) {
    this.employeeService.selectedEmployee = Object.assign({}, emp);
  }

  onDelete(key: string) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.employeeService.deleteEmployee(key);
      this.tostr.warning("Deleted Successfully");
    }
  }

}

/*employee.service.ts*/

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'
import { Employee} from './employee.model';
@Injectable()
export class EmployeeService {
  employeeList: AngularFireList<any>;
  selectedEmployee: Employee = new Employee();
  constructor(private firebase :AngularFireDatabase ) { }

  getData(){
    this.employeeList = this.firebase.list('masterSheet');
    return this.employeeList;
  }

  insertEmployee(employee : Employee)
  {
    this.employeeList.push({
      physicalverified:employee.physicalverified,
      /*
      name: employee.name,
      position: employee.position,
      office: employee.office,
      salary: employee.salary*/
    tagged:employee.tagged,
    team:employee.team,
    serialnumber:employee.serialnumber,
    assetnumber:employee.assetnumber,
    costcenter:employee.costcenter,
    inventory:employee.inventory,
    manufacturer:employee.manufacturer,
    assetdescription:employee.assetdescription,
    detailspecification:employee.detailspecification,
    capacity:employee.capacity,
    port:employee.port,
    typeofeqipment:employee.typeofeqipment,
    projectname:employee.projectname,
    bpoofficelocation:employee.bpoofficelocation,
    fulladdress:employee.fulladdress,
    region:employee.region,
    otherinfo:employee.otherinfo,
    remark:employee.remark,
    inout:employee.inout,
    status:employee.status,
    rack:employee.rack,
    far:employee.far
    });
  }

  updateEmployee(employee : Employee){
    this.employeeList.update(employee.$key,
      {
        physicalverified:employee.physicalverified,
        
        tagged:employee.tagged,
    team:employee.team,
    serialnumber:employee.serialnumber,
    assetnumber:employee.assetnumber,
    costcenter:employee.costcenter,
    inventory:employee.inventory,
    manufacturer:employee.manufacturer,
    assetdescription:employee.assetdescription,
    detailspecification:employee.detailspecification,
    capacity:employee.capacity,
    port:employee.port,
    typeofeqipment:employee.typeofeqipment,
    projectname:employee.projectname,
    bpoofficelocation:employee.bpoofficelocation,
    fulladdress:employee.fulladdress,
    region:employee.region,
    otherinfo:employee.otherinfo,
    remark:employee.remark,
    inout:employee.inout,
    status:employee.status,
    rack:employee.rack,
    far:employee.far
      });
  }

  deleteEmployee($key : string){
    this.employeeList.remove($key);
  }

}

<!--employee-list.component.html code-->
<h6 class="text-center">Asset List</h6><br/>
<table class="table table-striped" [mfData]="employeeList" #mf="mfDataTable" [mfRowsOnPage]="20">
  <thead>
  <tr>
      <th style="width: 20%">
        <mfDefaultSorter by="serialnumber">Serial Number</mfDefaultSorter>
      </th>
      <th style="width: 50%">
        Asset Description
      </th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let employee of mf.employeeList">
    <td>{{employee.serialnumber}}</td>
    <td>{{employee.detailspecification}}</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
      <td colspan="4">
          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
      </td>
  </tr>
  </tfoot>
</table>

如果我将mf.employeeList更改为employeeList，则显示数据，但不会显示在我设置的paginantio中。