具有扩展列和嵌套垫表的动态垫表列答案

【问题标题】：Dynamic Mat Table columns with expanded column and nested mat-table具有扩展列和嵌套垫表的动态垫表列
【发布时间】：2020-01-27 18:17:51
【问题描述】：

我正在创建一个可重用的 mat-table 组件，它接受 2 个输入：列元数据和表数据。列元数据如下所示：

var metadata:[
       { 
         'colName' : 'WO', 
         'expanded': false 
       },
       { 
         'colName' : 'Serial',
         'expanded': false
       },
       { 
         'colName' : 'Quantity',
         'expanded': false
       },
       { 
         'colName' : 'Nested',
         'expanded': true
       }

表格数据数组如下：

var data:[
     { 
       'WO': '2633',
       'Serial': '1qqqr4ew',
       'Quantity': 5,
       'Nested': []
     },
     { 
       'WO': '2633',
       'Serial': '1qqqr4ew',
       'Quantity': 5,
       'Nested': [
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           },
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           },
           { 
            'nestedCol1' : 3e2,
            'nestedCol2' : 2,
            'nestedCol3' : '01/01/2019'
           }
       ]
    },
    { 
       'WO': '1234',
       'Serial': 'qa9011',
       'Quantity': 200,
       'Nested': [
           { 
            'nestedCol1' : 121,
            'nestedCol2' : 21,
            'nestedCol3' : '15/03/2019'
           },
           { 
            'nestedCol1' : 450,
            'nestedCol2' : 24,
            'nestedCol3' : '23/07/2019'
           },
           { 
            'nestedCol1' : 91,
            'nestedCol2' : 12,
            'nestedCol3' : '01/05/2019'
           }
       ]
    }
 ]

从元数据对象数组中，我正在构建一个主表列定义，其中“扩展”属性设置为 true 的列需要是可扩展的。在可扩展列中，我需要构建一个嵌套的 mat-table（如果适用），显示来自数据对象数组对应属性（本例中为“嵌套”）的嵌套对象数组数据。

'expanded'属性设置为false的动态列很容易构造并正确显示数据，嵌套表也很容易构造。

有没有办法根据元数据列数组定义在主表中定义动态可扩展列？

每个主表只有一个可扩展的列定义，并非所有数据对象都有嵌套对象数组。

我使用 angular v.8 和 angular material v.8

【问题讨论】：

你累了什么？我们至少需要知道你的角度水平，才能知道如何应对。

标签： angular angular-material2 mat-table

【解决方案1】：

据我了解，您希望根据数据对象是否具有嵌套元素来动态添加扩展的真或假。

您可以简单地迭代并检查嵌套长度来做到这一点。

【讨论】：