ngx-datatable inline editing troubles: dblclick event not working

Question

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>

Justin Wright Justin Wright · Accepted Answer · 2018-04-25T00:34:18

So for anybody coming here, the issue is the exact same as answered on this question and this question.

That is I was generating a new array each time. So angular couldn't bind an event to an array item.

How I fixed it was instead of doing something like this

get headers(): any[] { return methodThatGeneratesData(); }

I simply to make a class variable to hold onto the array.

headers: any[] = [];

And then make my call elsewhere to populate it with data.

**\facepalm** Still learning Angular and all of it's details.

ngx-datatable inline editing troubles: dblclick event not working

1 Answers