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

Question

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

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

但是，我最近被告知，只要有人突出显示过滤器的文本，就会触发错误。这对我来说没有任何意义，特别是因为我不是一位经验丰富的前台开发人员。我认为这是一个与库本身有关的问题，而不是我的代码。

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

https://gyazo.com/f41fe4db230d3204bfeb6b4e1220f93d

而错误的内容：

DatatableComponent.html：65 ERROR TypeError：无法在checkAndUpdateView（供应商）的Object.debugUpdateDirectives [as updateDirectives]（vendor.js：81724）的Object.eval [as updateDirectives]（DatatableComponent.html：76）中读取未定义的属性'length'。 .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>

而已。希望有一天这对某人有用。

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>