Ionic3+Angular4集成ngx-datatable时遇val.slice is not a function错误求助

嘿，我之前也碰到过一模一样的问题！这个报错本质是ngx-datatable在处理数据时，期望拿到数组类型的数据源，但你传给它的可能是对象、null、undefined这类非数组值，导致它调用数组的slice方法时直接报错了。咱们一步步来排查解决：

1. 先确认绑定的数据源是不是真数组 #

ngx-datatable的rows属性必须绑定数组，如果你是从接口拿数据，很可能接口返回的是一个包含数组的对象（比如{ list: [...] }），但你直接把整个响应对象传给了rows，这就会触发错误。

举个例子：
如果接口返回结构是这样：

{
  "data": [{"id":1, "name":"张三"}, {"id":2, "name":"李四"}]
}

那你得把rows绑定到data数组，而不是整个响应对象：

<ngx-datatable [rows]="tableData.data" ...></ngx-datatable>

2. 给数据源初始化空数组 #

在组件类里，一定要把绑定给rows的变量初始化为空数组，别让它默认是undefined或者null，不然组件初始渲染时就会报错：

// 正确操作：一开始就设为空数组
public tableRows: any[] = [];

// 错误操作：未初始化，默认是undefined
public tableRows: any[];

这样就算数据还没加载完成，ngx-datatable也能拿到合法的空数组，不会触发slice报错。

3. 检查数据解析过程 #

如果你用Angular 4的HttpModule请求数据，记得正确解析响应并确保最终赋值给rows的是数组：

import { Http } from '@angular/http';

constructor(private http: Http) {}

ngOnInit() {
  this.http.get('你的接口地址')
    .map(res => res.json())
    .subscribe(response => {
      // 保险起见，先判断是不是数组，不是的话取数组部分
      this.tableRows = Array.isArray(response) ? response : response.data;
    }, error => {
      console.error('数据请求失败', error);
      // 出错时也给个空数组，避免报错
      this.tableRows = [];
    });
}

4. 确认app.module.ts的配置没问题 #

结合你给出的代码片段，别忘了在模块里正确导入NgxDatatableModule，不然组件也没法正常使用：

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@NgModule({
  declarations: [
    // 你的组件列表
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    HttpClientModule,
    NgxDatatableModule // 必须加这个！
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
  bootstrap: [IonicApp]
})
export class AppModule {}

总的来说，这个错误的核心就是ngx-datatable的rows属性没拿到有效的数组，从数据源类型、初始化、数据解析这几个方向排查，基本就能解决问题啦。

内容的提问来源于stack exchange，提问作者priya