Angular 2通过服务器API加载数据：data.slice error

我试图使用Angular2 ng智能表插件从我的API加载数据到自定义组件。Angular 2通过服务器API加载数据：data.slice error

按照他们的文档（https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/basic-example-load.component.ts）

我有我的组件，如：

import { LocalDataSource } from 'ng2-smart-table'; 
import { ProductService } from '../../../services/product.service'; 

export class CategoryItemsComponent implements OnInit { 

... 
source: LocalDataSource; 

constructor(private productService: ProductService, 
      private flashMessage: FlashMessagesService, 
      private router: Router, 
      http: Http) { 
     this.source = new LocalDataSource(); 

     this.productService.getProductsOncategory(this.categoryid).subscribe((data) => { 
     this.source.load(data); 
    }); 

}

ProductService .TS

getProductsOncategory(category_id) { 

let catUrl = "http://localhost:5000/products/getProductsOncategory" 
let headers = new Headers(); 
headers.append('Content-Type', 'application/json'); 
let catIdObj = JSON.stringify({ category_id: category_id }) 
return this.http.post(catUrl, catIdObj, { headers: headers }) 
.map((response: Response) => response.json()) 
    .do(data => console.log(JSON.stringify(data))) 
    .catch(this.handleError); 
}

在服务功能中使用上述API的工作完美在我的邮递员。

现在我需要将来自该API的dame数据加载到我的自定义组件中。

我收到此错误：

ERROR TypeError: this.data.slice is not a function

at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.getElements (http://localhost:4200/1.chunk.js:22280:30) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.emitOnChanged (http://localhost:4200/1.chunk.js:22185:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.load (http://localhost:4200/1.chunk.js:22105:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.load (http://localhost:4200/1.chunk.js:22243:38)

来源

2017-07-20 phyme

好吧，我得到它通过使用这样的：

source: LocalDataSource; 

constructor(private productService: ProductService, 
      private flashMessage: FlashMessagesService, 
      private router: Router, 
      http: Http) 
{ 
    this.source = new LocalDataSource(); 
} 

onChange(categoryid) { 
this.productService.getProductsOncategory(categoryid).subscribe(data => { 
    if (data.success) { 
    this.source.load(data.products); 
    console.log('Products obtained'); 
    } else { 
    console.log('Not obtained!'); 
    } 
}); 

}

来源

2017-07-20 09:44:24 phyme

有同样的问题。它解决了我检查所有匹配列并添加缺少表格数据。例如我delared可变

Settings = { 
.... 
columns: { 
    id: { 
    title: 'id', 
    show: false, 
    type: 'string', 
    }, 
    name: { 
    title: 'name', 
    type: 'string', 
    }, 
    //compare columns in json response in same variable declaration 
    //for your data table [source] 
} 
}

而在第二种情况下你的表格尽量充分的数据加载之前得到dataTableSource数据，以避免这种使用方法setTimeout();并设置更多的时间。例如：

getChildData(): Promise<any> { 
    return new Promise((resolve, reject) => { 
     setTimeout(() => { 
      resolve(this.childsList); 
     }, 4000);//<= increase this value 
    }); 
}

原谅我的英文））

来源

2017-07-29 09:41:04 llotall

Angular 2通过服务器API加载数据：data.slice error

回答

相关问题