Проблемы встроенного редактирования с помощью ngx-datatable: событие dblclick не работает - PullRequest
Новая
       20

Проблемы встроенного редактирования с помощью ngx-datatable: событие dblclick не работает

0 голосов
/ 25 апреля 2018

Я пытаюсь использовать библиотеку ngx-datatable в своем проекте Angular 4.

Я следовал примеру встроенного редактирования, предоставленного демонстрационным кодом исходного кода найдено здесь .В частности это файл .

И я подтвердил, что все работает, перечисляя детали каждого ngx-datatable-column отдельно, точно так же, как показывает демонстрационный код.Однако, когда я использую директиву ngFor для динамического циклического прохождения по моим rows данным, я не получаю ошибок в консоли и вижу, что все мои строки заполнены, но двойной щелчок в любой строке, чтобы начать встроенное редактирование не удалось.Это как будто что-то или глотает, или мешает обнаружению удара` .

Ниже приведен файл моего шаблона при использовании 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>

1 Ответ

0 голосов
/ 25 апреля 2018

Так что для любого, кто придет сюда, проблема та же, что и для ответа на этот вопрос и этот вопрос .

То есть я генерирую новый массивкаждый раз.Таким образом, angular не может связать событие с элементом массива.

Как я это исправил, вместо того, чтобы делать что-то вроде этого 

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

Я просто сделал переменную класса для хранения намассив. 

headers: any[] = [];

А затем позвонить в другое место, чтобы заполнить его данными.

** \ facepalm ** Все еще изучаю Angular и все его детали.

...