当前位置: 首页 > 工具软件 > ngx-datatable > 使用案例 >

ngx-datatable在angular5版本下无法实现列的拉伸效果

秦景福
2023-12-01

项目进行到末期,需要对系统中所有的table列的宽度进行拉伸,之前用的ngx-datatable进行表格的渲染,但是由于项目开发的时间太久,目前还是用的angular5的版本,在使用ngx-datatable的过程中发现无法对列进行拉伸,报如下错误:

rxjs_1.fromEvent is not a function

然后新建一个angular7的项目发现就无此问题,可以正常拉伸列,以为是ngx-datatable对angular5版本拉伸不支持,一度想把项目从angular5升级到7,但是项目依赖的很多第三库又不支持angular7,所以陷入了进退两难的状态,如果要升级到7就会有很多地方要重写,而且使用的ant的模板也要整体来更换标签,saas系统里面之前踩了很多坑,怕升级到7之后会遇到其他的坑,而且时间也不允许再整体重写。然后折中的使用了jq里面的拉伸插件,虽然解决了拉伸的问题,但是表头固定又陷入了一个坑,表头固定就无法支持列的拉伸,这个囧啊…(因为老板在web端的表格要求不显示分页,table要进行滚动加载,所以表头必须要固定在顶部,否则无法看到每项的标题)

然后这条路也走不通,就还是想想看看ngx-datatable的源码吧,看报错的fromEvent是怎么回事,在release/index.js报错的第5800行发现是这样使用的

var mouseup = rxjs_1.fromEvent(document, 'mouseup');

既然报这个错那就说明rxjs_1没有这个方法,好吧继续查看rxjs_1是什么东西发现它就是rxjs,在5761行

var rxjs_1 = __webpack_require__("rxjs")

然后查看文档发现是这样使用的


fromEvent

语法
Rx.Observable.fromEvent(element, eventName, [selector])

功能: 将一个元素上的事件转化为一个Observable

注意: 使用jQuery,Zepto,Backbone.Marionette,AngularJS和Ember.js的库方法,并且如果不存在,则回退到本地绑定。 如果您使用AMD,您可能需要将这些库作为RxJ的依赖关系包括在requirejs配置文件中。 当决定使用哪个库时,RxJ将尝试检测它们的存在。

eg:

var clicks = Rx.Observable.fromEvent(document, 'click');

参考上面写法把ngx-datatable的源码修改成下面的,问题解决,可以拉伸列了

var mouseup = rxjs_1.Observable.fromEvent(document, 'mouseup');
 类似资料: