Skip to main content
La etiqueta que tenia puesta era AngularJS también llamado Angular 1 sin embargo esta utilizando Angular que es denominado simplemente Angular a partir de la versión 2. Siendo considerados por tanto dos frameworks distintos.
Enlace
se eliminaron 26 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
JuankGlezz
  • 5.6k
  • 10
  • 34
  • 59

Hola buenas noches comunidad estoyEstoy intentando implementar el data table en angular 4 y estoy muriendo en el intento no entiendo qque hago mal

loLo tengo importado en el modulo y todo pero no me busca no filtra solo muestra la tabla y ya.

Hola buenas noches comunidad estoy intentando implementar el data table en angular 4 y estoy muriendo en el intento no entiendo q hago mal

lo tengo importado en el modulo y todo pero no me busca no filtra solo muestra la tabla y ya

Estoy intentando implementar el data table en angular 4 y estoy muriendo en el intento no entiendo que hago mal

Lo tengo importado en el modulo y todo pero no me busca no filtra solo muestra la tabla y ya.

Origen Enlace
j.dow
  • 85
  • 2
  • 10

como implementar El Datatable En Angular 4

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