Datatables не обнаруживает, что JSON прочитан с помощью Angular - PullRequest
Новая
       17

Datatables не обнаруживает, что JSON прочитан с помощью Angular

0 голосов
/ 03 апреля 2019

Я читаю JSON с сервера с Angular, чтобы отобразить его с помощью Datatables.Я правильно прочитал файл и помещен в таблицу, но функциональные возможности Datatables не работают, он говорит, что «Нет данных в таблице» и «Показано от 0 до 0 из 0 записей», но данные есть.

Плагин и его зависимости правильно установлены и импортированы.

вот файл json: http://dummy.restapiexample.com/api/v1/employees

- empleado.ts 

export class Empleado{
    id :number;
    employee_name :string;
    employee_salary :number;
    employee_age :number;
    profile_image :string;
}

- leer-empleados.service.ts 

import { Injectable } from '@angular/core';
import { Empleado } from './empleado';
import {HttpClient} from '@angular/common/http';
import{Observable} from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class LeerEmpleadosService {
  private urlFichero = 'http://dummy.restapiexample.com/api/v1/employees';

  getEmpleados() :Observable<Empleado[]> {
    return this.http.get<Empleado[]>(this.urlFichero);
  }

  constructor(private http: HttpClient) { }
}

- empleados.component.ts 

import { Component, OnInit } from '@angular/core';
import { LeerEmpleadosService } from '../leer-empleados.service';
import { Empleado } from '../empleado';

@Component({
  selector: 'app-empleados',
  templateUrl: './empleados.component.html',
  styleUrls: ['./empleados.component.css']
})
export class EmpleadosComponent implements OnInit {

  empleados :Empleado[];
  dtOptions :DataTables.Settings = {};
  constructor( private leerService :LeerEmpleadosService) { }

  ngOnInit() {
    this.dtOptions = {
      pagingType: "full_numbers",
      pageLength: 5
    }
    this.getEmpleados();

  }
  getEmpleados() :void{
    this.leerService.getEmpleados().subscribe(empleados => this.empleados = empleados);
  }

}

- empleados.component.html 

<table datatable class="row-border hover" [dtOptions]="dtOptions">
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Salario</th>
      <th>Edad</th>
      <th>Imagen</th>
    </tr>
  </thead>
  <tbody *ngFor="let empleado of empleados">
    <tr>
      <td>{{empleado.id}}</td>
      <td>{{empleado.employee_name}}</td>
      <td>{{empleado.employee_salary}}</td>
      <td>{{empleado.employee_age}}</td>
      <div *ngIf="empleado.profile_image !=''; else elseImagen">
        <td >{{empleado.profile_image}}</td>
      </div>
      <ng-template #elseImagen>
        <td >No existe imagen</td>
      </ng-template>

    </tr>
  </tbody> 
</table>

- app.module.ts 

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { DataTablesModule } from 'angular-datatables';

import { AppComponent } from './app.component';
import { EmpleadosComponent } from './empleados/empleados.component';

@NgModule({
  declarations: [
    AppComponent,
    EmpleadosComponent
  ],
  imports: [
    BrowserModule,
    DataTablesModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1 Ответ

0 голосов
/ 03 апреля 2019

Еще одно редактирование моего ответа .... На самом деле это ошибка в реализации библиотеки. См. Отчет об ошибке github . В любом случае, если нет основной причины использовать эту библиотеку, вы, вероятно, можете использовать угловой материал для достижения той же, если не лучшей функциональности. Syncfusion также имеет отличную библиотеку компонентов, бесплатную для сообщества.

...