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

Question

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

到目前为止一切正常，我能够分别过滤每一列并组合多个过滤器的结果。

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

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

https://gyazo.com/f41fe4db230d3204bfeb6b4e1220f93d

以及错误的内容：

DatatableComponent.html:65 错误类型错误：无法读取属性 未定义的“长度” 在 Object.eval [as 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% 确定长度属性已正确初始化。

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

编辑：正如下面评论中提到的，我现在发布我们找到的修复程序。

我们创建了以下指令：

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>

就是这样。希望有一天这对某人有用。

Answer 1

如果结果为空，请尝试使用 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>