错误类型错误：无法读取未定义的属性“aDataSort”-ANGULAR 8

Question

Please hope you can help me correct this "aDataSort" error in the datatables.

core.js:6014 ERROR TypeError: Cannot read property 'aDataSort' of undefined
at _fnSortFlatten (jquery.dataTables.js:5928)
at _fnSortingClasses (jquery.dataTables.js:6266)
at loadedInit (jquery.dataTables.js:1208)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:1306)
at Function.each (jquery.js:381)
at jQuery.fn.init.each (jquery.js:203)
at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)
at jQuery.fn.init.$.fn.DataTable (jquery.dataTables.js:15210)
at angular-datatables.directive.js:51
at ZoneDelegate.invokeTask (zone-evergreen.js:391)

It seems to me that the table in the html requires the table to have < thead> < tbody>. But I am hiding it with an "if" when the table does not have any records.

<div *ngIf="programaciones?.length==0" class="alert alert-info">
        There is no record in the database!
    </div>

    <div class="table-responsive"  >
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
        <thead *ngIf="programaciones?.length>0">
            <tr >
                <th>Id</th>
                <th>Consultorio</th>
                <th>Usuario</th>
                <th>Fecha</th>
                <th>Hora</th>
                <th>Num. Turno</th>
                <th>Editar</th>
                <th>Eliminar</th>
            </tr>
        </thead>
        <tbody >
             <tr *ngFor="let programacion of programaciones" >
                <td>{{programacion.pro_codigo}}</td>
                <td>{{programacion.consultorio.con_nombre}}</td>

How can I correct this error, or is there some other way to hide the table when there are no records.

Answer 1

How about adding display: none/hidden instead of using ngIf

Something like this:

[ngStyle]="programaciones?.length>0 : {'display': 'block'} ? {'display': 'none'}