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.
this.rol = response.json().datos