val.slice is not a function error in ionic 3 angular 4 application

Question

当我尝试在 ionic 3 angular 4 应用程序中实现 ngx-datatable 时，出现 val.slice is not a function 错误。请在下面找到代码部分

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { HeaderMenuComponent } from '../components/header-menu/header-menu';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { MyApp } from './app.component';
import { TodolistPage } from '../pages/todolist/todolist';

import { AuthServiceProvider } from '../providers/auth-service';

@NgModule({
  declarations: [
    MyApp,
    TodolistPage,
    SignupPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    HttpClientModule,
    NgxDatatableModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TodolistPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthServiceProvider,
  ]
})
export class AppModule {}

待办事项-list.html:

  <ion-navbar>
    <ion-title>To-do List</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <div>
    <ngx-datatable
    [sortType]="'multi'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="50"
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [limit]="10">
  </ngx-datatable>
  </div>


</ion-content>

待办事项-list.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service';

@IonicPage()
@Component({
  selector: 'page-todolist',
  templateUrl: 'todolist.html',
})
export class TodolistPage {

  public columns: any;
  public rows: any;
 public error: any;


  constructor(public navCtrl: NavController, public navParams: NavParams,public authService: AuthServiceProvider) {
   this.columns = [
      { prop : 'name' },
      { name : 'ID' },
      { name : 'Username'},
      { name : 'Email ID'}
    ];
    this.getUsers();  //runs on page load
  }


  getUsers() {
    this.authService.getData('getFeed').then((result) => {  
      //console.log(result);  
      this.rows = result;
    },(err) => {
      this.error =err;
      alert(this.error);
    });
  }

}

和我的服务文件获取数据：

auth-service.ts:

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { Header } from 'ionic-angular/components/toolbar/toolbar-header';

let apiUrl = "http://localhost/PHP-Rest/api/";


@Injectable()
export class AuthServiceProvider {

  constructor(public http: Http) {
    console.log('Hello AuthServiceProvider Provider');
  }


  getData(type){

    return new Promise((resolve, reject) => {
     let headers = new Headers();
     this.http.get(apiUrl+type,{headers: headers}).subscribe(res => {
       resolve(res.json());
     }, (err) => {
       reject(err);
     });
  })
}

}

对于这个程序，我得到一个 JSON 输出如下，

我没有发现任何问题，我是 ionic 的新手 angular。请帮我解决这个问题。

提前致谢。

val.slice 不是 ionic 3 angular 4 应用程序中的函数错误

Answer 1

通常，当您尝试在 table 中呈现的数据不是像数组这样的“可迭代”类型时，就会出现您看到的错误。

所以在你的例子中你有对象 { feedData: [...array of objects...] }

并且您需要它是：[...对象数组...]

val.slice is not a function error in ionic 3 angular 4 application

val.slice is not a function error in ionic 3 angular 4 application

ngx-datatable

ionic3

angular