So I have updated my application to angular 9 and with that I updated ngx-datatable from version 16.0.2 to 16.0.3. But now my columns stay empty. Everything worked fine a minor version before. No errors, no warning. Here is the simplifed code I use to fill my columns.
component.ts:
columns = [
{ name: 'Vertragsnummer', prop: 'VertragsNr', flexGrow: 6 },
{ name: 'Risiko', prop: 'RisikoAllgemein', flexGrow: 10 },
{ name: 'Sparte', prop: 'Sparte', flexGrow: 5 },
{ name: 'Gesellschaft', prop: 'Vu', flexGrow: 10 },
{ name: 'Ablauf', prop: 'Vertragsablauf', flexGrow: 4 }
];
component.html:
<ngx-datatable
*ngIf="columns"
class="material afn-flat-table"
#datatable
[rows]="(rows$ | async) || []"
[columns]="columns"
[columnMode]="'flex'"
[headerHeight]="60"
[footerHeight]="30"
[rowHeight]="30"
[count]="liste.length"
[limit]="limit"
[selected]="selected"
[selectionType]="'row'"
[messages]="messages"
(select)="onSelect($event)"
(sort)="onSort($event)"
>
<div *ngFor="let column of columns">
{{asdf(column)}}
<ngx-datatable-column prop="{{ column.prop }}" name="{{ column.name }}" [flexGrow]="column.flexGrow">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
<div name="firsrowheader" (click)="sort()">
<span *ngIf="sorts[0]?.prop == column.prop">
<mat-icon class="fas asf-gridSortIcon" [ngClass]="{ 'fa-sort-up': sorts[0].dir === 'asc', 'fa-sort-down': sorts[0].dir === 'desc' }">
</mat-icon>
</span>
<label i18n style="height:10px;cursor:pointer" class="columnlabel">{{ column.name }}</label>
</div>
</ng-template>
</ngx-datatable-column>
</div>
</ngx-datatable>
I am logging the columns and they are all correct but aren't rendered and all this results in an empty table:
I left out a lot of code here, and just included what I think could be a part of the problem. I didn't find any indication that the column specification changed. The rows are there, otherwise I wouldn't see the icon in the first row.
If you need further information just ask.