html - 具有向下钻取功能的 Angular 5 表

Question

我正在处理 Angular 5，需要创建一个具有向下钻取功能的表，其中可以有 n 个父子组件，当您单击父级时，将显示所有子组件(向下钻取)。请在下面找到示例数据。

"[{"Id":1,
"ClientName":null,
"ProductName":"Product1",
"CatagoryName":null,
"Jsondata":"[{\"TKey\":\"hubname\",\"TValue\":\"XXXX\"},{\"TKey\":\"IPAddress\",\"TValue\":\"YYYY\"},{\"TKey\":\"Origin\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Domain\",\"TValue\":\"AAAA\"},{\"TKey\":\"Health\",\"TValue\":\"Running\"}]",
"ParentName":"",
"Name":"XXXX",
"EntityType":null,
"CreatedTime":"2018-02-09T13:20:23.253",
"child":[  
   {  
      "Id":2,
      "ClientName":null,
      "ProductName":"Prod1",
      "CatagoryName":null,
      "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"BBBB\"},{\"TKey\":\"AgentIP\",\"TValue\":\"YYYY\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"ZZZZ\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
      "ParentName":"XXXX",
      "Name":"BBBB",
      "EntityType":null,
      "CreatedTime":"2018-02-09T13:20:23.257",
      "subChild":[  
         {  
            "Id":2,
            "ClientName":null,
            "ProductName":"CAUIM",
            "CatagoryName":null,
            "Jsondata":"[{\"TKey\":\"AgentName\",\"TValue\":\"CCCC\"},{\"TKey\":\"AgentIP\",\"TValue\":\"DDDD\"},{\"TKey\":\"Agent_Address\",\"TValue\":\"FFFF\"},{\"TKey\":\"Response\",\"TValue\":null},{\"TKey\":\"Status\",\"TValue\":\"Running\"}]",
            "ParentName":"BBBB",
            "Name":"CCCC",
            "EntityType":null,
            "CreatedTime":"2018-02-09T13:20:23.257"
         }
      ]
   }
]
}
]"

Answer 1

目前还不清楚你想要实现什么，但我会尽力而为。假设您单击表格行，您可以像这样使用弹出窗口:

$mdDialog.show({
               template: '<drill-down></drill-down>',
               scope: $scope,
               preserveScope: true,
               targetEvent: event,
               clickOutsideToClose: false,
               controller: BarController,
               controllerAs: 'BarController'
              });

我为它制作了一个组件，并在 template 标签中使用它。 $mdDialog 来自 Angular 本身。在此之后，您可以在此弹出窗口中使用一个名为 Jquery Data table 的漂亮框架。

链接:https://datatables.net/

在此框架中，您可以指定所需的向下钻取数据。它还支持过滤、分页和导出PDF或Excel等功能。