ngx-datatable 内联编辑问题：dblclick 事件不起作用答案

【问题标题】：ngx-datatable inline editing troubles: dblclick event not workingngx-datatable 内联编辑问题：dblclick 事件不起作用
【发布时间】：2018-10-05 07:02:21
【问题描述】：

我正在尝试在我的 Angular 4 项目中使用 ngx-datatable 库。

我一直在关注源代码演示found here 提供的内联编辑示例。特别是这个file。

当我单独列出每个ngx-datatable-column 的详细信息时，我已经确认一切正常，就像演示代码显示的那样。但是，当我使用ngFor 指令动态循环遍历我的rows 数据时，我在控制台中没有收到任何错误，并且我看到所有行都已填充，但是双击任何行开始内联编辑失败。就好像某些东西正在吞噬或阻止 hit` 检测。

下面是我使用ngFor时的模板文件。不知道我做错了什么或错过了什么。非常感谢任何帮助。

<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>

【问题讨论】：

标签： angular angular-directive ngfor ngx-datatable

【解决方案1】：

所以对于任何来到这里的人来说，这个问题与这个question 和这个question 上的回答完全相同。

也就是说，我每次都在生成一个新数组。所以 Angular 无法将事件绑定到数组项。

我如何修复它而不是做这样的事情

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

我只是为了让一个类变量保存到数组中。

headers: any[] = [];

然后在其他地方打电话给它填充数据。

**\facepalm** 仍在学习 Angular 及其所有细节。

【讨论】：