angular - How to use DataTable with angular 7

Question

I am setting up a table of employees with DataTable, the DataTable appears, but the pagination , filtering and sorting doesn't work , no error appears in the console.

Ps : I am working with angular 7

Thanks for help

Employees-List.ts :

import { Component, OnInit , Inject , ViewChild} from '@angular/core';
import { RestApiService } from "../shared/rest-api.service";
import { Router , ActivatedRoute} from '@angular/router';
import { Employee } from '../shared/employee';
import { MatTableDataSource, MatSort, MatPaginator } from 
'@angular/material';  
import { DatatableComponent } from '@swimlane/ngx-datatable';
@Component({
selector: 'app-employees-list',
templateUrl: './employees-list.component.html',
styleUrls: ['./employees-list.component.css']
})
export class EmployeesListComponent implements OnInit {


dataSource : any =[];

displayedColumns: string[] = ['id', 'name', 'email', 'phone'];  
@ViewChild(DatatableComponent , {static : true}) table: 
DatatableComponent;
@ViewChild(MatPaginator , { static: true }) paginator: MatPaginator;  
@ViewChild(MatSort , { static: true }) sort: MatSort;  
Employee: any = [];
actRoute: ActivatedRoute;
items : any = [];

constructor(
public restApi: RestApiService,
public router: Router
) {
this.restApi.getEmployees().subscribe(data1 =>{  
  this.dataSource= data1;

});
 }

ngOnInit() {
this.loadEmployees();
this.dataSource.paginator = this.paginator;  
this.dataSource.sort = this.sort;  
}

applyFilter(filterValue: string) {  
this.dataSource.filter = filterValue.trim().toLowerCase();  

if (this.dataSource.paginator) {  
  this.dataSource.paginator.firstPage();  
}  
}  

// Get employees list
loadEmployees() {
return this.restApi.getEmployees().subscribe(datat => {
  this.Employee = datat;
  this.items=datat;
})
}

// Delete employee
deleteEmployee(id) {
if (window.confirm('Are you sure, you want to delete?')){
  this.restApi.deleteEmployee(id).subscribe(datax => {
    this.loadEmployees()
  })
}
}  

}

the Employees-List.html :

<h2>Employees List</h2>  
<mat-form-field>  
<input matInput (keyup)="applyFilter($event.target.value)" 
placeholder="Filter">  
</mat-form-field>  

<div class="mat-elevation-z8">  
<table mat-table [dataSource]="dataSource" matSort>  

<ng-container matColumnDef="id">  
  <th mat-header-cell *matHeaderCellDef mat-sort-header> employee id</th>  
  <td mat-cell *matCellDef="let employee"> {{employee.id}} </td>  
</ng-container>  

<ng-container matColumnDef="name">  
  <th mat-header-cell *matHeaderCellDef mat-sort-header>  Employee Name 
</th>  
  <td mat-cell *matCellDef="let employee"> {{employee.name}} </td>  
</ng-container>  

    <ng-container matColumnDef="email">  
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>  
      <td mat-cell *matCellDef="let employee"> {{employee.email}} </td>  
    </ng-container>  

<ng-container matColumnDef="phone">  
  <th mat-header-cell *matHeaderCellDef mat-sort-header> phone </th>  
  <td mat-cell *matCellDef="let employee"> {{employee.phone}} </td>  
</ng-container>  


<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>  
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>  
</table>  

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>  
</div>

this is what I found when I run it ! the pagination , sorting and filtering does'nt work

标签： angularangular-material

Answer 1

在Employees-List.ts 文件中，您必须在初始化数据后添加分页和排序，例如

this.restApi.getEmployees().subscribe(data1 =>{  
  this.dataSource= new MatTableDataSource(data1);
  this.dataSource.paginator = this.paginator;  
  this.dataSource.sort = this.sort;  
});

您还必须根据 mat-table更改this.dataSource= data1为this.dataSource= new MatTableDataSource(data1)