Not data available in table

Question

Not data available in table

Navigation

#1 by (0 votes)

1

I am making requests to an API of mine made in Laravel that gives me a JSON, which maps to a table and when trying to load with DataTables shows the data but says below Not data available in table .

This is the html of the table view

<div class="col-md-12">

<div *ngIf="rol">
    <!-- <a (click)="Roles()" class="btn btn-danger">cargar lista</a> -->

  <table datatable="ng" class="table table-hover" id="example">
    <thead>
      <!-- <tr>
      <th>
         <div class="botones" >
            <a [routerLink]="['/dashboards/addroluser']" class="btn btn-md btn-warning">Add Rol
            </a>
         </div>
      </th>

    </tr> -->


    <tr>
      <th style="width: 1%" class="text-center">No.</th>
       <th>Name rol</th>
            <th></th>
            <th></th>
    </tr>
    </thead>
    <tbody>
          <tr align="left" *ngFor="let producto of data">
          <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>

</div>




  </div>

and there is the q component that calls a service:

export class ViewComponent implements OnInit{
    public title : string;
    public rol : Roles;
    public data: any=[];


constructor(
    private _router: Router,
    private _route : ActivatedRoute,
    private _service : StrService


    ){

    this.title='List Roles';
    this.rol = new Roles('');

}

ngOnInit()
{
    console.log('View Roles initialized');

    // setTimeout(function()
    // {
    //  this.Roles();

    // },3000);


}




Roles()
{
    this._service.getRoles().subscribe(

        response=>{
            if (response.code==200)
            {

                this.data = response.datos;
                // setTimeout(function(){
                //  this.rol=response.datos;
    //          },5000);

                console.log('laaaaaaaaaaaaaaaaaaaaaaaaa'+this.data);
                // console.log(this.rol);
            }
        },error=>{
            console.log(<any>error)

        });
}

angular-datatables angularjs-2.0

asked by j.dow 15.08.2017 в 23:59

source

1 answer

How can I draw my own route in google maps? [closed] Numbers that are not repeated in JavaScript fixes

score 0 · Answer 1

I found the solution in the following link link

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Subject } from 'rxjs/Rx';

import 'rxjs/add/operator/map';

class Person {
  id: number;
  firstName: string;
  lastName: string;
}

@Component({
  selector: 'app-angular-way',
  templateUrl: 'angular-way.component.html'
})
export class AngularWayComponent implements OnInit {
  dtOptions: DataTables.Settings = {};
  persons: Person[] = [];
  // Utilizamos este desencadenante porque la búsqueda de la lista de personas puede ser bastante larga,
       // Por lo tanto, aseguramos que los datos se obtienen antes de renderizar
  dtTrigger: Subject<any> = new Subject();

  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
   pagingType: 'full_numbers',
   pageLength: 2,
   search:true,
   paging:true
};
    this.http.get('data/data.json')
      .map(this.extractData)
      .subscribe(persons => {
        this.persons = persons;
        // Calling the DT trigger to manually render the table
        this.dtTrigger.next();
      });
  }

  private extractData(res: Response) {
    const body = res.json();
    return body.data || {};
  }
}

and the html view:

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<thead>
  <tr>
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let person of persons">
    <td>{{ person.id }}</td>
    <td>{{ person.firstName }}</td>
    <td>{{ person.lastName }}</td>
  </tr>
</tbody>
</table>

there is the solution. what the trigger does is get the data or wait for the data to arrive to render the table