Question

HTML

<table  datatable id="tblProjects" [dtOptions]="dtOptions"   [dtTrigger]="dtTrigger"  class="table row-border hover" *ngIf="this.temp_var">
              <thead>
                <tr>
                  <th>Project Name</th>
                  <th>Status </th>
                  <th>Download</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let project of projects">
                  <td>{{ project.sProjectrName}}</td>
                  <td  *ngIf="project.isActive"> Active </td>
                  <td  *ngIf="!project.isActive"> In Active</td>
                  <td><a rel="nofollow" href="http://localhost:8090/download/{{project.iCustomerID}}/{{project.iProjectID}}">File</a></td>
                  <td><a rel="nofollow" href="javascript:void(0)"  (click)="deleteProject(project.iProjectID)"><i class="glyphicon glyphicon-trash" ><span class="i-text">Delete</span></i></a></td>
                </tr> 
              </tbody>
            </table>

Componet.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataTablesModule, DataTableDirective } from 'angular-datatables';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from '../project';
import { CustomerService } from '../customer.service';
import { DomSanitizer } from '@angular/platform-browser';
import { ControlPosition } from '@agm/core/services/google-maps-types';

@Component({
  selector: 'app-projectlist',
  templateUrl: './projectlist.component.html',
  styleUrls: ['./projectlist.component.scss']
})
export class ProjectlistComponent implements OnInit {
  fileUrl;
  public temp_var: Object=false;
  projects: Project[];
  dtOptions: DataTables.Settings = {};
  constructor(private http: HttpClient,
    private router: Router,private customerService : CustomerService,private sanitize : DomSanitizer) { 
    }

  ngOnInit() {
    const customerId = sessionStorage.getItem('userId');
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 10,
     processing: true
   };
     this.customerService.getprojectList(customerId).subscribe(data => {
     this. projects=data;
      this.temp_var=true;
    });
  }
  deleteProject(projectId)
  {
    this.http.get('http://localhost:8090/delete/'+projectId)
      .subscribe(res => {
        window.location.reload();
        }, (err) => {
          console.log(err);
        }
      ); 
  }

}

我已在Angular 6应用程序中集成了j查询数据表，我想知道如何在执行删除和更新记录之类的事件后在angular 6应用程序中刷新j查询数据表。在数据表中，我将删除项目我需要刷新的表格我已经尝试了许多方法来完成此操作。如果有人知道答案，请更新

Answer 1

'datatable =“ ng”'在表格标签上使用此属性或

遵循这两个链接，并使用角度数据表的重新渲染方法

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

http://l-lin.github.io/angular-datatables/archives/#!/rerender

Answer 2

删除后您尚未从服务器取回流，

方法1.在get之后获取新的项目数据（我假设您正在此api中执行删除操作），然后重新分配projects变量，

this.http.get('http://localhost:8090/delete/'+projectId)
  .subscribe(res => {
    // assuming res returns updated list of projects
    this.projects = res.projects;
    }, (err) => {
      console.log(err);
    }
  );

方法2：您本可以使用REST端点的delete方法并执行与方法1相同的操作

Answer 3

    this.http.get('http://localhost:8090/delete/'+projectId)
    .subscribe(res => {
    this.projects.length = 0 // use this before getting response
    this.projects = res.projects;
    $('#tblProjects').DataTable().destroy // use these two lines after getting response <--------
    this.dtTrigger.next()
    }, (err) => {
    console.log(err);
    }
    );

如何在Angular 6中执行事件后刷新Jquery Data-table

3 个答案: