Как обновить таблицу данных Jquery после события, выполненного в angular 6

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);
        }
      ); 
  }

}

Я интегрировал таблицу j Query Data в свое приложение Angular 6, я хочу знать, какобновить j Запросить таблицу данных в приложении angular 6 после события, выполненного как удаление и обновление записей. В таблице данных я собираюсь удалить проект в таблице, которую мне нужно обновить. Я пробовал много способов сделать это. Если кто-нибудь знает ответ, пожалуйстаобновление

Answer 1

Вы не взяли поток обратно с сервера после удаления,

способ 1. Получить новые данные проекта после получения (я предполагаю, что вы выполняете удаление в этом API) и переназначить переменную проектов,

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 и выполнить ту же операцию, что и выше, указанную в способе 1

Answer 2

'datatable = "ng"' используйте этот атрибут в теге таблицы или

перейдите по этой двум ссылкам и используйте метод повторного рендеринга angular-datatables

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

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