Siguiendo esta guía.
categoria.component.html
<table datatable [dtOptions]="dtOptions" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody *ngIf="categorias?.length != 0">
<tr *ngFor="let categoria of categorias">
<td>{{ categorias.id }}</td>
<td>{{ categorias.nombre }}</td>
<td>{{ categorias.status }}</td>
</tr>
</tbody>
<tbody *ngIf="categorias?.length == 0">
<tr>
<td colspan="3" class="no-data-available">No data!</td>
</tr>
<tbody>
</table>
categoria.component.ts
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { CategoriaService } from '../services/categoria.service';
import { Categoria } from '../models/categoria';
class DataTablesResponse {
data: any[];
draw: number;
recordsFiltered: number;
recordsTotal: number;
}
@Component({
selector: 'app-categoria',
templateUrl: '../views/categoria.component.html',
styleUrls: ['../styles/categoria.component.css'],
providers: [CategoriaService]
})
export class CategoriaComponent implements OnInit {
dtOptions: DataTables.Settings = {};
public id;
public categoria: Categoria[] = [];
constructor(
private _route: ActivatedRoute,
private _router: Router,
private _categoriaService:CategoriaService,
private http: HttpClient
){
}
ngOnInit(): void {
const that = this;
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 2,
serverSide: true,
processing: true,
ajax: (dataTablesParameters: any, callback) => {
that.http
.post(
'http://localhost/webapp-backend/index.php/categorias/listar',
dataTablesParameters, {}
).subscribe(resp => {
that.categoria = resp.data;
callback({
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: []
});
});
},
columns: [{ data: 'id' }, { data: 'nombre' }, { data: 'status' }]
}
}
}
Esto me arroja el siguiente error:
ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[CategoriaComponent -> HttpClient]: StaticInjectorError(Platform: core)[CategoriaComponent -> HttpClient]: NullInjectorError: No provider for HttpClient! Error: StaticInjectorError(AppModule)[CategoriaComponent -> HttpClient]: StaticInjectorError(Platform: core)[CategoriaComponent -> HttpClient]: NullInjectorError: No provider for HttpClient! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062) at resolveToken (core.js:1300) at tryResolveToken (core.js:1244) at