我目前正在尝试在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>
就是这样。希望有一天对某人有用。
答案 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>