标题问题中的Ngx-datatable过滤器

时间:2019-02-25 10:11:58

标签: javascript angular angular-material ngx-datatable

我目前正在尝试在ngx-datatable网格上实现过滤系统。

到目前为止,一切工作正常,我能够分别对每一列进行过滤,并将多个过滤器的结果组合在一起。

但是,最近有人告诉我,只要有人突出显示过滤器的文本,就会触发错误。这对我来说毫无意义,尤其是因为我不是一个经验丰富的前端开发人员。我认为这是与库本身有关的问题,与我的代码无关。

这是一个小GIF,用来显示正在发生的事情。

https://gyazo.com/f41fe4db230d3204bfeb6b4e1220f93d

错误内容:

  

DatatableComponent.html:65错误TypeError:无法读取属性   未定义的“长度”       在Object.eval [作为updateDirectives](DatatableComponent.html:76)       在Object.debugUpdateDirectives [作为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.js:81303)       在checkAndUpdateView(vendor.js:81126)       在callViewAction(vendor.js:81361)

这毫无意义,因为我100%确定length属性已正确初始化。

希望有人对此有所了解...

编辑:因此,正如下面的评论中提到的,我现在发布我们发现的修复程序。

我们创建了以下指令:

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 :(得分:0)

尝试使用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>