Question

我是angular 7的新手，想在angular 7中实现数据表。首先，我在admin模块中创建了一个模块admin，我创建了一个组件作为manage-categories，我想在此组件中实现datatable，下面是我的代码

angular.json

    "styles": [
          "src/styles.css",
          "node_modules/datatables.net-dt/css/jquery.dataTables.css"
        ],
        "scripts": [              
    "node_modules/datatables.net/js/jquery.dataTables.js"
        ]
      },

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';


@NgModule({
declarations: [
AppComponent,
HeaderComponent    
],
imports: [
BrowserModule,
HttpClientModule,
AdminModule,
AuthModule,
AppRoutingModule
],
providers: [httpInterceptorProviders],
bootstrap: [AppComponent]
})
export class AppModule { }

admin.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataTablesModule } from 'angular-datatables';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminDashboardComponent } from './admin-dashboard/admin- 
dashboard.component';
import { ManageCategoriesComponent } from './manage-categories/manage- 
categories.component';


@NgModule({
declarations: [AdminDashboardComponent,ManageCategoriesComponent, 
ManagePagesComponent],
imports: [
CommonModule,
DataTablesModule ,    
AdminRoutingModule
]
})
export class AdminModule { }

manage-categories.ts

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';

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

title = 'Manage Blogs';
blogs: Blog;
error: string;
constructor(private blogService: BlogService) { }

ngOnInit() {
this.blogService.getBlogs().subscribe(
  (data: Blog) => this.blogs = data,
  error => this.error = error
);
}
}

manage-categories.html

   <div class="box-body">
          <table datatable class="table table-bordered table-hover">
            <thead>
            <tr>
              <th>#ID</th>
              <th>Image</th>
              <th>Title                    
              </th>
              <th >Created At                      
              </th>
              <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let blog of blogs">
              <td>{{blog.id}}</td>
              <td><img src="{{blog.image}}" class="col-md-3"></td>
              <td>{{blog.title}}</td>
              <td>{{blog.created_at | date: 'mediumDate'}}</td>
              <td class="action">
                  <a href="#" class="btn btn-info btn-sm">Edit</a>
                  <a href="#" class="btn btn-danger btn-sm">Delete</a>
              </td>
          </tr>
  </tbody>
  </table>
  </div>

以上是我的代码，我已经在下面的链接中尝试过

https://l-lin.github.io/angular-datatables/#/getting-started

它可以处理静态数据，但是在我的表中绑定动态数据时不起作用，它的排序，分页和搜索过滤器将无法工作。

Answer 1

数据更新后，您必须重新呈现表。您可以将DataTableDirective用于子元素，然后销毁表并重新创建。我将您的组件更改为-

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../../services/blog.service';
import { Blog } from '../../models/blog';
import { DataTableDirective } from 'angular-datatables';

@Component({
selector: 'app-manage-categories',
templateUrl: './manage-categories.component.html',
styleUrls: ['./manage-categories.component.css']
})
export class ManageCategoriesComponent implements OnInit {
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
title = 'Manage Blogs';
blogs: Blog;
error: string;
dtTrigger: Subject<any> = new Subject();
dtOptions: any = {};
constructor(private blogService: BlogService) { }

ngOnInit() {
this.blogService.getBlogs().subscribe(
  (data: Blog) => { this.blogs = data; this.rerender(); },
  error => this.error = error
);
}

rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
  // Destroy the table first
  dtInstance.destroy();
  // Call the dtTrigger to rerender again
  this.dtTrigger.next();
});
 }
}

，并且您的模板的数据表标签为-

<div class="box-body">
          <table datatable  [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" 
          class="table table-bordered table-hover">
            <thead>
            <tr>
              <th>#ID</th>
              <th>Image</th>
              <th>Title                    
              </th>
              <th >Created At                      
              </th>
              <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let blog of blogs">
              <td>{{blog.id}}</td>
              <td><img src="{{blog.image}}" class="col-md-3"></td>
              <td>{{blog.title}}</td>
              <td>{{blog.created_at | date: 'mediumDate'}}</td>
              <td class="action">
                  <a href="#" class="btn btn-info btn-sm">Edit</a>
                  <a href="#" class="btn btn-danger btn-sm">Delete</a>
              </td>
          </tr>
  </tbody>
  </table>
  </div>

在角度7中实现数据表

1 个答案: