I'm trying to use the ngx-datatable library in my Angular 4 project.
I've been following the example for inline editing provided by the source code demo found here. Specifically this file.
And I've confirmed everything works when listing out each ngx-datatable-column
's details separately, just like how the demo code shows. However, when I use an ngFor
directive to dynamically loop through my rows
data, I get no errors in the console and I see all my rows populated, but double clicking on any row to start inline editing fails. It's like something is either swallowing or preventing the hit` detection.
Below is my template file when using ngFor
. Not sure what I'm doing wrong or missing. Any help is highly appreciated.
<ng-container *ngIf="rows.length > 0">
<ngx-datatable #mydatatable class="bootstrap" [headerHeight]="50" [limit]="5" [columnMode]="'standard'"
[footerHeight]="50" [rowHeight]="'auto'" [rows]="rows" [externalPaging]="true"
[count]="page.totalElements" [offset]="page.pageNumber" [limit]="page.size" (page)="setPage($event)">
<ng-container *ngFor="let column of headers; let j = index">
<ngx-datatable-column [name]="headers[j].name" [sortable]="false">
<ng-template ngx-datatable-header-template>
<span [ngStyle]="{ 'font-weight': 'bold'}">{{displayNames[j]}}</span>
</ng-template>
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value"
let-row="row">
<span title="Double click to edit" (dblclick)="editing[rowIndex + '-' + headers[j].name] = true"
*ngIf="!editing[rowIndex + '-' + headers[j].name]" [ngStyle]="{ 'z-index': '500'}">
{{value}}
</span>
<input autofocus (blur)="updateValue($event, 'headers[j].name', rowIndex)" *ngIf="editing[rowIndex+ '-' + headers[j].name]"
type="text" [value]="value" />
</ng-template>
</ngx-datatable-column>
</ng-container>
</ngx-datatable>
</ng-container>