UI-GRID动态列标题和对象数据数组

我有以下数据

vm.myData =
        {
            'Type' : 
            [
                'A',
                'B',
                'C'
            ],
            'Data': [
            {
                'Key': 'XXX',
                'AValues':
                {
                    'ID': '1',
                    'Val': '10'
                },
                'BValues':
                {
                    'ID': '2',
                    'Val': '20'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            },
            {
                'Key': 'TTT',
                'AValues':
                {
                    'ID': '2',
                    'Val': '30'
                },
                'BValues':
                {
                    'ID': '4',
                    'Val': '70'
                },
                'CValues':
                {
                    'ID': '2',
                    'Val': '20'
                }
            }
            ]
        };

Key A   B   C
XXX 10  20  20
TTT 30  70  20

我试了很多方法,但都没有达到预期的效果。 我希望列的名称来自“myData”上的“Type”。 我能够通过硬编码显示第一行。

vm.gridOptions = {
            columnDefs: [
                { name: 'Key', field: 'Data[0].Key'},
                { name: 'A', field: 'Data[0].AValues.Val'},
                { name: 'B', field: 'Data[0].BValues.Val'},
                { name: 'C', field: 'Data[0].CValues.Val'}
            ],
            data: vm.myData
        };

如果有任何帮助,我将不胜感激。

使现代化 在考虑了纳伦·穆拉利的建议后,我做了以下事情,这给了我想要的结果。 有没有办法从“myData”中的“Type”数组中动态获取列标题

vm.gridOptions = {
            columnDefs: [
                { displayName: 'Key', name: 'Key' },
                { displayName: 'A', name: 'AValues.Val' },
                { displayName: 'B', name: 'BValues.Val' },
                { displayName: 'C', name: 'CValues.Val' }
            ],
            data: vm.myData.Data
        };