如何正确地将服务器端数据表与 Angular 6 集成答案

【问题标题】：How to properly integrate server-side datatable with Angular 6如何正确地将服务器端数据表与 Angular 6 集成
【发布时间】：2018-10-11 13:12:04
【问题描述】：

我的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。非常感谢任何更正和解决方案。

【问题讨论】：

@Nasiruddin Saiyed 你能举个例子吗？我似乎无法理解你的意思。
YEEEEEEEEEEESSSSSSSS!!!!!!有效！！！非常感谢！ :D 请将其作为答案，以便我将其标记为已接受的答案。
顺便说一句，您是否也知道如何删除我的 Actions 列中的排序功能？
为此你需要分享你是如何设置数据表实现的，它的指令或者你使用jQuery实现的。
我所做的只是上面的代码在我的项目中使用DataTable。我在app.component.ts 中导入了DataTable 并在my-table.component.html 中调用它。

标签： angular datatables

【解决方案1】：

这是因为首先呈现表，然后在 api 调用后加载数据，我所做的简单操作是使用 *ngIf 并隐藏表，直到未获取数据，然后它将正确加载。它只是一个实验。

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

编码愉快！！！。

【讨论】：