Question

我正在尝试在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>

Answer 1

因此，对于任何来到此处的人来说，问题与此question及此question上的答案完全相同。

那就是我每次都在生成一个新数组。因此，angular不能将事件绑定到数组项。

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

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

我只是创建一个类变量来保存数组。

headers: any[] = [];

然后在别处打电话给我填充数据。

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

ngx-datatable内联编辑问题：dblclick事件无法正常工作

1 个答案: