Hola buenas noches comunidad estoy intentando implementar el data table en angular 4 y estoy muriendo en el intento no entiendo q hago mal
mi componente:
export class ViewComponent implements OnInit{
public title : string;
public rol : Roles;
// public data: any[];
public filterQuery = "";
public rowsOnPage = 5;
public sortBy = "denominacion";
public sortOrder = "asc";
constructor(
private _router: Router,
private _route : ActivatedRoute,
private _service : StrService
){
this.title='List Roles';
this.rol = new Roles('');
}
ngOnInit()
{
console.log('View Roles initialized');
this.Roles();
}
Roles()
{
this._service.getRoles().subscribe(
response=>{
if (response.code==200)
{
this.rol=response.datos
console.log(JSON.stringify(response.datos));
}
},error=>{
console.log(<any>error)
});
}
public confirmado;
borrarConfirm(id){
this.confirmado = id;
}
cancelarConfirm(){
this.confirmado = null;
}
onDeleteProducto(id){
this._service.deleteroles(id).subscribe(
response => {
if (response.code == 200) {
this.Roles();
} else {
alert('Error al borrar el producto.');
}
},
error => {
console.log(<any>error);
}
);
}
}
Mi html
<div class="col-md-12">
<table
class="table table-striped"
[mfData]="rol | dataFilter : filterQuery"
#mf="mfDataTable"
[mfRowsOnPage]="rowsOnPage"
[(mfSortBy)]="sortBy"
[(mfSortOrder)]="sortOrder"
>
<thead>
<tr>
<th style="width: 20%">
<mfDefaultSorter by="id">Id</mfDefaultSorter>
</th>
<th style="width: 50%">
<mfDefaultSorter by="denominacion">Denominacion</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="action">Action Delete</mfDefaultSorter>
</th>
<th style="width: 20%">
<mfDefaultSorter by="action">Action edit</mfDefaultSorter>
</th>
</tr>
<tr>
<th colspan="5">
Filter by Denominacion:
<input class="form-control" [(ngModel)]="filterQuery"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of rol">
<td>{{item.id}}</td>
<td>{{item.denominacion}}</td>
<td>
<div class="botones" *ngIf="confirmado != item.id">
<a (click)="borrarConfirm(item.id);" class="btn btn-md btn-danger">Borrar</a>
</div>
<div class="botones" *ngIf="confirmado== item.id">
<a (click)="onDeleteProducto(item.id);" class="btn btn-md btn-danger">Quiero eliminarlo</a>
<a (click)="cancelarConfirm();" class="btn btn-md btn-warning">Cancelar</a>
</div>
</td>
<td>
<div class="botones" >
<a [routerLink]="['/dashboards/editrol', item.id]" class="btn btn-md btn-warning">Editar
</a>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
</div>
<!--
<table class="table table-hover margin bottom">
<thead>
<tr>
<th style="width: 1%" class="text-center">No.</th>
<th>Name rol</th>
<th>Action delete</th>
<th>Action edit</th>
</tr>
</thead>
<tbody >
<tr align="left" *ngFor="let producto of rol">
<td>
{{producto.id}}
</td>
<td>{{producto.denominacion}}</td>
<td>
<div class="botones" *ngIf="confirmado != producto.id">
<a (click)="borrarConfirm(producto.id);" class="btn btn-md btn-danger">Borrar</a>
</div>
<div class="botones" *ngIf="confirmado== producto.id">
<a (click)="onDeleteProducto(producto.id);" class="btn btn-md btn-danger">Quiero eliminarlo</a>
<a (click)="cancelarConfirm();" class="btn btn-md btn-warning">Cancelar</a>
</div>
</td>
<td>
<div class="botones" >
<a [routerLink]="['/dashboards/editrol', producto.id]" class="btn btn-md btn-warning">Editar</a>
</div>
</td>
</tr>
</tbody>
</table>
-->
lo tengo importado en el modulo y todo pero no me busca no filtra solo muestra la tabla y ya