Data Table and angular 4

Question

Data Table and angular 4

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

My problem is that they do not load the data brought from my API in Laravel within the datatable in 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>

The table shows the data but it shows below: Not data available in table .

What am I doing wrong?

angularjs-2.0

asked by j.dow 15.08.2017 в 17:12

source

2 answers

How to point phpmyadmin local to server windows 2012? Validate registration of a teacher in a course and a PHP section

score 1 · Answer 1

Define well the variable that you want to binde to the HTML view, it would be:

rol: Roles[]; //de tipo array

since you are using an * nfFor directive and you need to traverse an object of type array.

*ngFor="let producto of rol"

Also check what your api returns to you, in my opinion you subscribe to a Observable<Roles[]> and if that is the case, it's nothing more than doing the following:

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)
    );
}

score 0 · Answer 2

It is most likely that at the moment of obtaining the data in your answer they do not have the appropriate format that you expect, JSON.

this.role = response.json (). data instead of this.rol = response.datos

If you use the 4.3 angular http client by default your requests will already be paired.