Question

我的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">

编码愉快！！！

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

1 个答案: