[Datatable] Cannot read property 'dtInstance'

Bonjour

J'ai intégré datatables dans mon application Angular mais lorsque je lance l'application, j'ai ce message d'erreur:

Citation:

ListeCompteComponent.html:6 ERROR TypeError: Cannot read property 'dtInstance' of undefined
at TblSearchingComponent.push../src/app/demo/pages/compte/liste-compte/tbl-searching/tbl-searching.component.ts.TblSearchingComponent.ngAfterViewInit (tbl-searching.component.ts:71)
at callProviderLifecycles (core.js:22318)
at callElementProvidersLifecycles (core.js:22292)
at callLifecycleHooksChildrenFirst (core.js:22282)
at checkAndUpdateView (core.js:23218)
at callViewAction (core.js:23450)
at execComponentViewsAction (core.js:23392)
at checkAndUpdateView (core.js:23215)
at callViewAction (core.js:23450)
at execEmbeddedViewsAction (core.js:23413)

Voici le code de mon fichier tbl-searching.component.ts:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {DataTableDirective} from 'angular-datatables';
import {HttpClient} from '@angular/common/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';
import { CommonModule } from '@angular/common';
 
 
@Component({
  selector: 'app-tbl-searching',
  templateUrl: './tbl-searching.component.html',
  styleUrls: ['./tbl-searching.component.scss']
})
export class TblSearchingComponent implements OnInit, AfterViewInit {
  dtColumnSearchingOptions: any = {};
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
 
 
  public isNoResult: boolean = true;  
  public empData: Object;
  public temp: Object=false;
 
  constructor( private http: HttpClient) { }
 
  ngOnInit(): void  {
	 // this.reloadData();
	 this.http.get('http://localhost:8080/gestion-scolaire/rest/compte/api/comptes').subscribe((resp: Response) => {
	this.empData = resp;
	this.temp = true;
  }); 
    this.dtColumnSearchingOptions = {
 
    //  ajax: 'fake-data/datatable-data.json',
      columns: [{
        title: 'firstName',
        data: 'firstName'
      }, {
        title: 'lastName',
        data: 'lastName'
      }, {
        title: 'job',
        data: 'job'
      }, {
        title: 'address',
        data: 'address'
      }, {
        title: 'email',
        data: 'email'
      }],
      responsive: true,
      dom: 'Blfrtip',
      buttons: [
        'copy',
        'print',
        'excel',
        'csv'
      ]
    };
  }
 
 
  ngAfterViewInit(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });
    });
  }
 
}

Voici le code de mon fichier tbl-searching.component.html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table datatable [dtOptions]="dtColumnSearchingOptions" class="table table-striped row-border table-hover" *ngIf="this.temp">
 <tr *ngFor="let compte of this.empData ">
                <td>{{compte.firstName}}</td>
                <td>{{compte.lastName}}</td>
                <td>{{compte.job}}</td>
                <td>{{compte.address}}</td>
                <td>{{compte.email}}</td>
              </tr> 
 <tfoot>
  <tr>
    <th><input type="text" placeholder="Search firstName" name="search-firstName" class="form-control" /></th>
    <th><input type="text" placeholder="Search lastName" name="search-lastName" class="form-control" /></th>
    <th><input type="text" placeholder="Search job" name="search-job" class="form-control" /></th>
    <th><input type="text" placeholder="Search address" name="search-address" class="form-control" /></th>
    <th><input type="text" placeholder="Search email" name="search-email" class="form-control" /></th>
  </tr>
  </tfoot>
</table>

Voici le code de mon fichier liste-compte.component.html:

Code:

1
2
3
4
5
6
7
8
9
10
11
<div class="row">
 
<div class="col-sm-12">
    <app-card cardTitle="Column Searchings" [options]="false">
      <div class="table-responsive">
        <app-tbl-searching></app-tbl-searching>
      </div>
    </app-card>
  </div>
 
</div>

Merci