1

Mi problema es que no cargan los datos traídos de mi API en Laravel dentro del datatable en Angular.

view-component.ts

export class ViewComponent implements OnInit {

  title: string;
  rol: Roles;

  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) {
          setTimeout(() => {
            this.rol= response.datos;
          }, 2000);
                console.log(this.rol);
          }
        },
      error => console.log(<any>error)
    );
}

view-component.html

<div class="col-md-12">
  <table id="entry-grid" datatable="ng" class="table table-hover">
    <thead>
      <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 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>
</div>

La tabla muestra los datos pero debajo muestra: Not data available in table.

 ¿Qué hago mal?

1

2 respuestas 2

1

Define bien la variable que quieras bindear a la vista HTML, sería:

rol: Roles[]; //de tipo array

ya que estas haciendo uso de una directiva *nfFor y necesitas recorrer un objeto de tipo array.

*ngFor="let producto of rol"

Tambien revisa que es lo que te devuelve tu api, a mi parecer te subscribes a un Observable<Roles[]> y en caso de ser así no es mas que hacer lo siguiente:

Roles() {
    this._service.getRoles().subscribe(
      (response: Roles[]) => {
        //comprueba que te devuelva un array de Roles
        console.log(response)
        this.rol= response;
        },
    error => console.log(<any>error)
    );
}
3
  • Mi api trae puros json amigo , d igual manera revisare muchas gracias
    – j.dow
    Commented el 31 ago. 2017 a las 1:29
  • puedes subir lo que retorna tu api? Commented el 31 ago. 2017 a las 15:08
  • { "msg":"Token Encontrado", "status":"Successfull", "datos":[ { "id":**, "name":"*", "email":"**********", "password":"***************************************", "remember_token":null, "token_ref":"**************************", "confirm_email":1, "refence_token":"*******************************", "created_at":"2017-08-26 02:05:15", "updated_at":"2017-08-26 02:05:15", "perfil":[] } ], "apisign":"********************************", "code":200 } esta es otra respuesta pero basicamente todas mis respuestas las retorno asi
    – j.dow
    Commented el 31 ago. 2017 a las 16:52
0

Lo más probable sea que en el momento de obtener los datos en tu respuesta estos no tengan el formato adecuado que esperas, JSON.

this.role = response.json().datos en vez de this.rol = response.datos

Si utilizas el cliente http de angular 4.3 por defecto tus peticiones ya estarán parseadas.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.