Фильтр Ngx-datatable в выпуске заголовка - PullRequest
Новая
       10

Фильтр Ngx-datatable в выпуске заголовка

0 голосов
/ 25 февраля 2019

В настоящее время я пытаюсь внедрить систему фильтрации в моей сетке с данными ngx.

Пока все работает, я могу фильтровать по каждому столбцу отдельно и объединять результаты нескольких фильтров.

Однако мне недавно сказали, что были ошибки, как только кто-то выделил текст фильтра.Это не имеет смысла для меня, тем более что я не опытный фронт-разработчик.Я думаю, что это проблема, связанная с самой библиотекой, а не с моим кодом.

Вот небольшой GIF-файл, показывающий, что происходит.

https://gyazo.com/f41fe4db230d3204bfeb6b4e1220f93d

И содержание ошибки:

DatatableComponent.html: 65 ОШИБКА TypeError: Невозможно прочитать свойство 'length' undefined в Object.eval [как updateDirectives] (DatatableComponent.html: 76) в Object.debugUpdateDirectives [as updateDirectives] (vendor.js: 81724) в checkAndUpdateView (vendor.js)81120) в callViewAction (vendor.js: 81361) в execEmbeddedViewsAction (vendor.js: 81324) в checkAndUpdateView (vendor.js: 81121) в callViewAction (vendor.js: 81361) в execComponentViewsAction (vendor.jate 81): 81:vendor.js: 81126) в callViewAction (vendor.js: 81361)

Что не имеет смысла, поскольку я уверен на 100%, что свойство длины правильно инициализировано.

Надеясь, что у кого-то есть идея по этому поводу ...

РЕДАКТИРОВАТЬ: Итак, как уже упоминалось в комментарии ниже, я сейчас публикую исправление, которое мы нашли.

Мы создали следующую директиву: 

import {Directive, HostListener} from "@angular/core";

@Directive({
  selector: "[selectStopPropagation]"
})
export class SelectStopPropagationDirective {
  @HostListener('select', ['$event'])
  public handleSelect(event: Event) {
    event.stopPropagation();
  }
}

, которую мы применили к каждому полю фильтра нашего приложения: 

<mat-form-field>
   <input matInput selectStopPropagation placeholder="Filter..." (keyup)='updateFilter($event,column.prop)'/>
</mat-form-field>

Вот и все.Надеюсь, что это будет полезно для кого-то один день.

1 Ответ

0 голосов
/ 07 марта 2019

Попробуйте использовать ngIf, чтобы избежать создания данных, если результат пустой 

<div *ngIf="rows.length">
     <ngx-datatable
        class="material"
        [rows]="rows"
        [loadingIndicator]="loadingIndicator"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [reorderable]="reorderable">
      </ngx-datatable>
   </div>
...