Как правильно интегрировать данные на стороне сервера с Angular 6

Question

My DataTable имеет эту проблему, когда все функции, такие как поиск, разбиение на страницы, сортировка и т. Д. Не работают.

Это просто показывает все данные из вызова API:

Код:

my-table.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';

import { MyTable } from './my-table';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class MyTableService {

  private myTableUrl = 'http://my-api-call/my-tables';

  constructor(private http: HttpClient) { }

  getMyTables (): Observable<MyTable[]> {

    return this.http.get<MyTable[]>(this.myTableUrl);
  }
}

my-table.component.ts

import { Component, OnInit } from '@angular/core';

import { MyTable } from './my-table';
import { MyTableService } from './my-table.service';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css'],
  providers: [MyTableService]
})
export class MyTablesComponent implements OnInit {

    myTables: MyTable[];

    constructor(private myTableService: MyTableService) { }

    ngOnInit() {

        this.getMyTables();
    }

    getMyTables(): void {
        this.myTableService.getMyTables()
        .subscribe(myTables => this.myTables = myTables);
    }

}

my-table.ts

export class MyTable {
    id: number;
    tp_name: string;
    tp_location: string;
    flag: number;
    creation_date: string;
    created_by: string;
    update_date: string;
    updated_by: string;
    error: string;
}

my-table.component.html

<table id="my-tables" datatable class="table table-borderless table-hover">
    <thead>
        <tr>
            <th>Name</th>
            <th>Location</th>
            <th>Flag</th>
            <th>Creation Date</th>
            <th>Created By</th>
            <th>Update Date</th>
            <th>Updated By</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody *ngIf="myTables?.length != 0">
        <tr *ngFor="let myTable of myTables">
            <td>{{ myTable.tp_name }}</td>
            <td>{{ myTable.tp_location }}</td>
            <td>{{ myTable.flag }}</td>
            <td>{{ myTable.creation_date }}</td>
            <td>{{ myTable.created_by }}</td>
            <td>{{ myTable.update_date }}</td>
            <td>{{ myTable.updated_by }}</td>
            <td class="btn-group">
                <button type="button" class="btn btn-warning"><i class="fa fa-edit"></i></button>
                <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
            </td>
        </tr>
    </tbody>
    <tbody *ngIf="myTables?.length == 0">
        <tr>
            <td colspan="3" class="no-data-available">No data found!</td>
        </tr>
    </tbody>
</table>

мои стили и скрипты:

"styles": [
  "src/styles.css",
  "node_modules/admin-lte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css",
  "node_modules/admin-lte/bower_components/font-awesome/css/font-awesome.min.css",
  "node_modules/admin-lte/bower_components/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/admin-lte/dist/css/skins/_all-skins.min.css",
  "node_modules/admin-lte/dist/css/AdminLTE.min.css"
],
"scripts": [
  "node_modules/admin-lte/bower_components/jquery/dist/jquery.min.js",
  "node_modules/admin-lte/bower_components/bootstrap/dist/js/bootstrap.min.js",
  "node_modules/admin-lte/dist/js/adminlte.min.js",
  "node_modules/admin-lte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js",
  "node_modules/admin-lte/bower_components/datatables.net/js/jquery.dataTables.min.js",
  "node_modules/admin-lte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"
]

Функциональные возможности работают, когда я вызываю только обычный файл JSON, например: private myTableUrl = 'path/to/my-table.json';.

Я думаю, что это проблема самого Angular и DataTable.

Примечание: я все еще изучаю Angular.Любые исправления и решения очень приветствуются.

Answer 1

Это потому, что таблица рендерится первой, а затем данные загружаются после вызова API. Я просто использовал * ngIf и скрывал таблицу до тех пор, пока данные не были извлечены, тогда она будет загружена правильно.Это просто эксперимент.

<table id="my-tables" datatable class="table table-borderless table-hover" *ngIf="myTable">

Удачного кодирования !!!.