0

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

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

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

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

在“服务器数据源示例”下

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

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

空白页.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);
}

如果我在端点中使用我的项目 url，则会出错

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

4

3 回答 3

3

这就是我所做的并且对我来说非常完美，我使用了智能表服务器端分页，但是为自定义过滤体验构建了我自己的过滤器。

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;
}
}
于 2020-10-04T13:53:09.503 回答
2

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

找到下面的示例代码

{

source: ServerDataSource;

constructor(http: HttpClient) {

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

}
于 2019-01-09T12:56:15.227 回答
0

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

于 2017-10-05T09:56:45.537 回答