Question

有没有人知道如何从Angular2的ng2-smart表插件加载服务器数据。

我从Node API检索的产品数据很少，我可以在浏览器日志中显示相同的onClick事件。

我需要在下面这个文档中提供的第三方插件表区域中显示相同内容：

前端： https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server

在＆＃34;服务器数据源示例＆＃34;

下

代码： https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/advanced-example-server.component.ts

因此我在我的代码中配置如下：

坯料page.component.ts

import { ServerDataSource } from 'ng2-smart-table'; 
import { Component } from '@angular/core';
import { Http } from '@angular/http';

@Component({
  selector: 'advanced-example-server',
  template: `
     <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
 `,
   })

export class BlankPageComponent implements OnInit {
    settings = {
    columns: {
      id: {
        title: 'ID',
      },
      albumId: {
        title: 'Album',
      },
      title: {
        title: 'Title',
      },
      url: {
        title: 'Url',
      },
    },
  };

    source: ServerDataSource;

   //Doubt or Problem here!!!  
   constructor(http: Http) {
    this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' });
  }

  //Tried like this too (Which is not the right way of calling)
  constructor(http: Http) {
    this.source = new ServerDataSource(http, { endPoint: this.productService.getProductsOncategory(this.categoryid)  });
  }

 //Dint work this too!!

 constructor(http: Http) {
    this.source = new ServerDataSource(http, { endPoint:'http://localhost:5000/products/getProductsOncategory ' });
  }
}

我的service.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})
  console.log(catIdObj)
  return this.http.post(catUrl,catIdObj,{headers:headers})
  .map((response:Response)=>response.json())
  .do(data=>console.log(JSON.stringify(data)))
  .catch(this.handleError);
}

如果我在端点

中使用我的项目网址时出错

错误：未捕获（在承诺中）：错误：数据必须是数组。请通过密钥＆＃39;＆＃39;检查从服务器响应中提取的数据。存在并且是数组。

Answer 1

在此示例中，我的数据是资源，因此数据键设置为资源

找到以下示例代码

{

source: ServerDataSource;

constructor(http: HttpClient) {

this.source = new ServerDataSource(http, { dataKey: 'resource', endPoint:'http://localhost:8080/api/v2/mysql/_table/able' })

}

Answer 2

这就是我所做的并最适合我的工作，我使用了智能表服务器端分页，但是构建了自己的过滤器以实现自定义过滤体验。

1-定义服务器数据源来源：ServerDataSource;

2-使用构造对象在构造函数中设置

this.source = new ServerDataSource(http,
  {
 endPoint: 'full-url-for-endpoint', 
 dataKey: 'your-list-path-from-response' for example 'data.records' , 
 pagerPageKey: 'your backend param excpected for page number key', 
 pagerLimitKey: 'your backend param excpected for page size',
 totalKey: total records returned in response path for example 'data.total',
 filterFieldKey: your filter keys template should set to '#field#' if you need to send params as you set, Default is '#field#_like'
  });`

3-添加设置对象

settings = {
actions: {
  custom: [ // if you need custom actions do like that 
    { name: 'view-something', title: '<i title="Exception" class="nb-alert"></i>' },
    { name: 'do-custom', title: '<i class="fa  fa-pencil"></i>' }
  ],
  add: true, //if you don't need default add button set to false 
  edit: true, //if you don't need default add button set to false 
  delete: true, //if you don't need default delete button set to false 
  position: 'right' // buttons position 
}, // remove add , edit , delete objects if you don't use 
    add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
},
pager: {
  display: true // set to false if no need for pagination 
},
columns: { 
  Id: {  // set up table cols - Id is a prop name returned from backend
    title: 'ID',  // display name in table header 
    type: 'number',
    filter: false  // add text filter for it or not 
  },
  Name: {
    title: 'Full Name',
    type: 'string',
    filter: false
  }
}
};

//添加过滤器数据，我使用了一个与表格ngModel绑定的自定义表单进行过滤，因此假设您有一个名为filter的模型，该模型可以从外部表单获取数据

 FilterData() {

this.source.reset(true);  // reset your old filtered data 
this.source.setPage(1, false); // set page to 1 to start from beginning 

let filterArr = this.getFilterArray(); // add a new filter data, but be careful to not sent any empty data, as it throws an exception 
if (filterArr.length)
  this.source.setFilter(filterArr, false, false);

this.source.refresh(); // this will call the server with new filter and paginatio data
}

getFilterArray() {  // setup new filter 
let filterArray = [];
if (this.filter.id)
  filterArray.push({ field: 'id', search: this.filter.id });
if (this.filter.name)
  filterArray.push({ field: 'name', search: this.filter.name});

return filterArray;  
}
 onCustomAction(event) {  // custom buttons code 
  switch (event.action) {
    case 'view-something':
     // put your code here 
     break;
    default:
     console.log('Not Implemented Action');
    break;
}
}

Answer 3

您需要为dataKey设置ServerDataSource。例如，如果您的JSON为{ data: [...], total: .. }，则需要设置dataKey = 'data'。

Angular 2：使用Server数据源将数据加载到我的ng智能表中

3 个答案: