Cannot read property 'headerRow' of undefined in Angular2+

Kris-I

Hello,

In angular 2+ application, I use datatables.net work (can see it, use it, filter, ...) but I get some errors in the console.

The error is :
ERROR TypeError: Cannot read property 'headerRow' of undefined
at Object.eval [as updateRenderer] (ng:///SharedModule/GridBalanceComponent.ngfactory.js:84)
at Object.debugUpdateRenderer [as updateRenderer] (vendor.js:47883)
at checkAndUpdateView (vendor.js:47259)

Could you tell me whats wrong ?

In the .TS file

 getDashboardBalance(){
    this.invoiceService.getDashboardBalance().subscribe((data) => {
      this.balances = data["balances"];

      this.dataTable = {
        headerRow: [ 'A', 'B', 'C', 'D', 'E', 'F' ],
        footerRow: [ 'A', 'B', 'C', 'D', 'E', 'F' ],
        dataRows: data["balances"]
      };
    },
    error => {
    });
  }

  ngAfterViewInit(){
    $('#myTable').DataTable({
      "pagingType": "full_numbers",
      "lengthMenu": [
        [15, 30, 50, -1],
        [15, 30, 50, "All"]
      ],
      responsive: true    
    });

    var table = $('#myTable').DataTable();
   }

<!-- In the HTML -->
<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
  <tr>
      <th>{{ dataTable.headerRow[0] }}</th>
      <th>{{ dataTable.headerRow[1] }}</th>
      <th>{{ dataTable.headerRow[2] }}</th>
      <th>{{ dataTable.headerRow[3] }}</th>
      <th>{{ dataTable.headerRow[4] }}</th>
      <th class="disabled-sorting text-right" width="60"></th>
  </tr>
</thead>        
<tbody>
  <tr *ngFor="let row of dataTable?.dataRows">
      <td>{{row['customerName']}}</td>
      <td>{{row['customerReference']}}</td>
      <td>{{row['invoiceAmount']}}</td>
      <td>{{row['amountReceived']}}</td>
      <td>{{row['balance']}}</td>
      <td class="text-right">  
        <a routerLink="/blabla" routerLinkActive="active">
          <span class="btn btn-primary btn-link btn-icon btn-sm edit">
            <i class="fa fa-bank"></i>
          </span>
        </a>
      </td>                              
  </tr>
</tbody>
</table>     

aleks121212

Hey, do you find solution for this?