文章/答案/技术大牛

发布

社区首页 >问答首页 >六角形材料设计中的嵌套表格行

问六角形材料设计中的嵌套表格行
EN

Stack Overflow用户

提问于 2018-05-30 08:25:59

回答 1查看 2.3K关注 0票数 0

我试图设计过去三年的财务支出报告，在嵌套表中使用矩阵设计。我希望输出应该看起来像

我有嵌套的json，其中每个父级都可以有n号的子级。例如

detailOfExpenditureSection= [
{
    sections: 'Revenue',
    headDetail: [{
        majorHeadNumber: '2403',
        majorHeadDescription: 'Animal Husbandry',
        subMajorHeadDetail: [{
            subMajorHeadNumber: '00',
            subMajorHeadDescription: '',
            minorHeadDetail: [{
                minorHeadNumber: '001',
                minorHeadDescription: 'Direction and Administration',
                subMinorHeadDetail: [{
                    subMinorHeadNumber: '60',
                    subMinorHeadDescription: 'Administration',
                    detailedHeadDetail: [{
                        detailedHeadNumber: '44',
                        detailedHeadDescription: 'Head Office Establishment',
                        objectHeadDetails: [{ objectHeadNumber: '01', objectHeadDescription: 'Salaries', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '11', objectHeadDescription: 'Travel Expenses', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '13', objectHeadDescription: 'Office Expenses', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        { objectHeadNumber: '26', objectHeadDescription: 'Advertisement and Publisity', actuals: '7327', budgetEstimate: '25664', revisedEstimate: '256891', budgetEstimateCurrentYear: '256914' },
                        ]
                    }]
                }]
            }]
        }]
    }]
}]

其中sections及其各自的头部可以重复使用。考虑到这一点，我试图使用材料表来设计表格，但无法设计想要的output.My问题，因为我无法将实际的和其他正确的列映射到头尾列中的对象头上。因此，行是不匹配的。我试图通过引用这里来创建指令来映射列和行，但没有能够这样做。如何获得所需的输出。

angular

datatable

material-design

angular-material

angular6

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-20 04:51:22

该表的数据来源可以通过三种方式提供(按复杂性顺序排列)：

简单的数据数组(每个对象表示一个表行)
流，它在每次数组更改时发出一个数据数组。
实现连接/断开接口的DataSource对象。

如果提供了数据数组，则必须在添加、删除或移动数组的对象时通知表。这可以通过调用renderRows()函数来完成，该函数将在上一个表呈现之后呈现diff。如果更改了数据数组引用，表将自动触发对行的更新。

当提供可观察的流时，当流发出新的数据数组时，表将自动触发更新。

最后，当提供DataSource对象时，表将使用connect函数提供的可观察流，并在该流发出新的数据数组值时触发更新。在表的ngOnDestroy期间或当数据源从表中删除时，表将调用DataSource的断开功能(可能对清理在连接过程中注册的任何订阅很有用)。找到的完整参考资料这里

将json转换为平面结构，并操作.ts文件中的数据，这对我在.html文件中使用ngIf="SomeFunction()"是有效的。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50599820

复制

相似问题

问六角形材料设计中的嵌套表格行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问六角形材料设计中的嵌套表格行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问六角形材料设计中的嵌套表格行
EN