Реализация данных в угловых 7

Question

Я новичок в angular 7 и хочу реализовать datatable в angular 7. Сначала я создал модуль admin в модуле администратора. Я создал компонент в виде управляющих категорий и хочу реализовать 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-category.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>