让yadcf（用于数据表）在Angular 2中工作（jQuery 3）

我一直在为datatables库使用很棒的插件yadcf。我一直在asp.net mvc 5的视图中使用它，没有任何问题。 我们目前正在将应用程序迁移到Angular 2，使用ASP.NET Web Api提供数据

我对代码进行了最小的修改，并通过在托管angular应用程序的index.html页面上的脚本标记中放置对datatables库的引用，使datatables正常工作

然后，我从承载该表的组件中运行下面的datatables初始化代码

但是，每当我尝试对yadcf.init执行相同操作时，我会得到：

Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined 

它崩溃了

ngOnInit(){
    this.table = $('#studyList')
                      .DataTable({
                                  serverSide: true,
                                  responsive: true,
                                  processing: true,
                                  ajax: {........
                                          ........
                                        }
                                  .........
                                  });

    // runs fine to here and datatables works when the following is commented out
    // but crashes as soon as i try and initialise yadcf from
    // from within the component as follows.

    yadcf.init(this.table,
        [
            {
            column_number: 5,
            filter_type: 'multi_select',
            select_type: 'select2',    
            data: [
                   { label: 'Included', value: 1 },
                   { label: 'Excluded', value: 2 },
                   { label: 'Insufficiently Screened', value: 4 }
                  ]
            }
        ]);
    // This causes "Uncaught (in promise): TypeError: 
    // Cannot read property 'replace' of undefined" error
}

我真的不想失去新应用程序中的过滤功能，因此非常感谢您的帮助

是否有一些关键，让这个工作与角度2，我失踪

编辑

---

看起来这个错误实际上是由使用jquery 3（见下文）引起的。

我意识到这个错误与angular没有任何关系（它只是被angular重新调用了）

我有一个不同版本的jQuery（原始MVC应用程序中有2.2.4，但我的angular应用程序的index.html中引用了3.1.0）

因此，yadcf不能很好地与jQuery3配合使用

特别是在

yadcf.init（可旋转、选项参数、参数）

函数进行以下赋值

function init(oTable, options_arg, params) {
    var instance = oTable.settings()[0].oInstance;

    // ......
    // it is assumed that variable instance has a property called selector         
    // but this is not the case in jquery 3 so all occurrences of 
    // "instance.selector" later in the function are undefined.
    // ......

    $(document).data(instance.selector + "_filters_position", params.filters_position);

    if ($(instance.selector).length === 1) {
        setOptions(instance.selector, options_arg, params);
        initAndBindTable(instance, instance.selector, 0, oTable);
    } else {
        for (i; i < $(instance.selector).length; i++) {
            $.fn.dataTableExt.iApiIndex = i;
            selector = instance.selector + ":eq(" + i + ")";
            setOptions(instance.selector, options_arg, params);
            initAndBindTable(instance, selector, i, oTable);
        }
        $.fn.dataTableExt.iApiIndex = 0;
    }
}       

function init（可旋转、选项参数、参数）{
var instance=oTable.settings（）[0].oInstance；
// ......
//假设变量实例有一个名为选择器的属性
//但jQuery3中并非如此，因此
//函数后面的“instance.selector”未定义。
// ......
$（document）.data（instance.selector+“\u filters\u position”，params.filters\u position）；
if（$（instance.selector）.length==1）{
setOptions（instance.selector、options_arg、params）；
initAndBindTable（instance，instance.selector，0，oTable）；
}否则{
对于（i；i<$（instance.selector）.length；i++）{
$.fn.dataTableExt.iApiIndex=i；
选择器=instance.selector+“：eq（“+i+”）；
setOptions（instance.selector、options_arg、params）；
initAndBindTable（实例、选择器、i、oTable）；
}
$.fn.dataTableExt.iApiIndex=0；
}
}       

---

这意味着yadcf没有初始化，因此稍后调用

yadcf.exFilterColumn（table_arg，col_filter_arr，ajaxSource）时会抛出错误
无法读取未定义的属性“replace”。
至于yadcf中的jQuery3支持，您必须使用（或0.8.9的最后一个beta版，其在
中也有说明）提供了一个指向测试页面的链接，以便可以对其进行调试