Error consuming a rest service in angular v6

Question

Error consuming a rest service in angular v6

Navigation

#1 by (0 votes)

0

Until now I have the following, I have my provider with the following code

 @Injectable({
 providedIn: 'root'
 })
 export class GetActuariosService {
 configUrl = 'https://xxxxxxxxxxx';
 constructor(private http: HttpClient) {
 }
 getConfig() {
  return this.http.get(this.configUrl);
}
}

and in my component I receive it like this:

ngOnInit( ) {
 this.service.getConfig().subscribe((data) => {
        this.items = data;
 });

and on the side of the html I want to paint it in a table:

<table datatable class="table table-striped">
    <thead>
        <tr>
            <th>Nº</th>
            <th>Nº</th>
            <th>Nº</th>
        </tr>
    </thead>
    <tbody >
        <tr *ngFor="let info of items">
            <th scope="row">{{info.nombre}}</th>
            <th scope="row">{{info.nombre}}</th>
            <th scope="row">{{info.nombre}}</th>
        </tr>
    </tbody>
  </table>

and he paints me the data correctly but he adds a note below that says 'No data available in the table',

and if I search for any existing data in the search field, the same thing appears:

It's as if that data did not exist inside the table, but nevertheless paints the data I use this library for tables link

datatables angular6 rest

asked by Eze 04.09.2018 в 19:23

source

1 answer

I have a question, it is because I do not know why the server and client do not connect How to send form from a modal window, without refreshing the page that calls it

score 0 · Accepted Answer

1) On the official page of angular-datatables you can customize the text by checking the amount of values in your list of items

HTML

  <tbody *ngIf="items?.length != 0">
      <tr *ngFor="let person of items">
          <td>{{ info.nombre }}</td>
      </tr>
  </tbody>
  <tbody *ngIf="items?.length == 0">
    <tr>
      <td colspan="3" class="no-data-available">No hay datos!</td>
    </tr>
  <tbody>


CSS
/*
   server-side-angular-way.component.css
*/
.no-data-available {
  text-align: center;
}

/*
   src/styles.css (i.e. your global style)
*/
.dataTables_empty {
  display: none;
}

2) There is also an issue in that git repository with your problem issue-1260 on github.

ngAfterViewInit(): void {

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.on( 'draw.dt', function () {
      if($('.dataTables_empty').length > 0)
      {
        $('.dataTables_empty').remove();
      }
    });

    });
  }