Как обновить таблицу данных jquery в Angular 6 после выполнения события

Question

Я интегрировал таблицу данных Jquery в свое приложение Angular 6, Как обновить данные jquery в приложении angular 6 после события, такого как удаление и обновление записей В Datatable

HTML

<table  class="table table-hover" datatable [dtOptions]="dtOptions"
  [dtTrigger]="dtTrigger" cellspacing="0" >
  <thead>
    <tr>
      <th>Country Name</th>
      <th>Country Code</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let country of country$">
      <td>{{ country.sCountryName }}</td>
      <td>{{ country.sCountryCode }}</td>
      <td  *ngIf="country.isActive"> Active </td>
      <td  *ngIf="!country.isActive"> In Active</td>
      <td><a  class="btn btn-default" (click)="openedit(editcontent,country)" ><i class="glyphicon glyphicon-pencil" ><span class="i-text">Edit</span></i></a>&nbsp;&nbsp;&nbsp;<a  class="btn btn-default" rel="nofollow" href="javascript:void(0)" (click)="deleteCountry(country)"><i class="glyphicon glyphicon-trash" ><span class="i-text">Delete</span></i></a></td>
    </tr>
  </tbody>
</table>

Component.ts

ngOnInit() {
    this.getallCountries();
}

getallCountries(){            
    this.dtOptions = {
        dom: '<"table-search-left"f><"table-count-right"l>tip',
        pagingType: 'full_numbers',
        pageLength: 10,
        processing: true 
    };
    this.crudservice.getCountryList().subscribe(data => {
        this. country$ = data;    
    });
}


deleteCountry(country) {             
    this.http.delete('https://localhost:8444/api/config/country/delete/'+country.iCountryID)
    .subscribe(res => {
    this.rerender();
    }, (err) => {
        console.log(err);
    }
    );
}
rerender(): void {
    console.log('this');
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.draw();
    });
}

Я собираюсь удалить страну и вызвать функцию перерисовки, но данные не обновляются.

Answer 1

Добавьте эту функцию в ваш .ts файл

Если инициализация с данными похожа на приведенную ниже

 // Datatable
      @ViewChild(DataTableDirective)
      dtElement: DataTableDirective;
      dtOptions: DataTables.Settings = {};
      dtTrigger: Subject<any> = new Subject();

Обновить функцию с датами

rerender_datatable() {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.draw();
    });
  }

После выполнения любого действиянапример, удалить или обновить запись, вызвать эту функцию rerender_datatable следующим образом

deleteRecord(){
  // Other Code of delete
  this.rerender_datatable();
}

Это обновит данные *

Обновление 1 (из-за вопроса обновлено)

Замените вашу getallCountries функцию на эту

getallCountries(){            
    this.dtOptions = {
        dom: '<"table-search-left"f><"table-count-right"l>tip',
        pagingType: 'full_numbers',
        pageLength: 10,
        processing: true,
        ajax: (dataTablesParameters: any) => {
          this.crudservice.getCountryList().subscribe(data => {
              this. country$ = data;    
          });
        }
    };

}