1

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
3
  • En tu AppModule, tienes importado "HttpClientModule"? Commented el 18 sept. 2018 a las 15:33
  • @FedericoMadoery no, ya lo importe, era la solución. Que vergüenza, estoy aprendiendo Angular.
    – bypabloc_
    Commented el 18 sept. 2018 a las 15:38
  • No hay problema, a todos nos paso, dejo la respuesta para que quede cerrada la pregunta. Commented el 18 sept. 2018 a las 15:56

1 respuesta 1

2

El error viene de la falta de importación del Modulo HttpClientModule que nos permite usar HttpClient.

Para poder usar HttpClient en toda la aplicación:

  • Ir a AppModule
  • Importar HttpClientModule desde @angular/common/http
  • Agregarlo a @NgModule({imports: [HttpClientModule])}

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.