Angular 2的动态表

Question

我是Angular 2应用程序的新手。我有一个屏幕，

           |  Product 1 Product 2   Product 3  ............. Product N
----------------------------------------------------
Customer 1 |     2         1            4
Customer 2 |     3         2            3
Customer 3 |     4         3            2
  .
  .
  .
Customer N

这里，列标题（Products）是动态的，客户也是动态的 我想像这样显示我的屏幕，我的json数据将是：

    data: [{
    ProductName:"Prod1",
    Data: [{
             CustomerName:"AAA",
             CustomerId:1,
             Count:2
        },
        {
             CustomerName:"BBB",
             CustomerId:2,
             Count:3
        }]
    },
{
    ProductName:"Prod1",
    Data: [{
             CustomerName:"AAA",
             CustomerId:1,
             Count:2
        },
        {
             CustomerName:"BBB",
             CustomerId:2,
             Count:3
        }]
    }]

Answer 1

你试过ng2-smart-table吗？

以下是一些代码：

• 列的设置

您-component.ts：

settings = {
    actions: false,
    hideSubHeader: true,
    columns: {
      Customers : {
        title: 'Customers',
        type: 'string'
      },
      Prod1: {
        title: 'Name of your product1',
        type: 'number'
      },
      Prod2: {
        title: 'Name of your product2',
        type: 'string'
      },
      // and so on for all your product
    }
  };

• 然后，您必须以这种方式格式化要传递到智能表的数据：

数据

data = [{customers = 'AA', Prod1 = 2, Prod2 = 1, ...., ProdN = nbOfProdN }, {customers = 'BB', ....}, ....];

• 将您的数据链接到表格：

为此，您需要以这种方式使用ng2-smart-table中的LocalDataSource： yourdatasource.load(data)

事实上，ng2-smart-table的文档非常完整，而且您可以使用此工具完成更多工作。