Angular 6中Material Design中的嵌套表行答案

【问题标题】：Nested table row in Material Design in Angular 6Angular 6中Material Design中的嵌套表行
【发布时间】：2018-11-09 00:31:30
【问题描述】：

我正在尝试使用矩阵设计在嵌套表中设计过去 3 年的财务支出报告。我希望输出看起来像我有嵌套的 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 及其各自的头部可以重复。考虑到这一点，我正在尝试使用材料表设计表，但无法设计所需的输出。我的问题是我无法将实际列和其他正确列映射到 Head Deails 列中的对象头。因此，该行不匹配。我试图通过参考here 创建指令来映射列和行，但无法这样做。怎样才能得到想要的输出。

【问题讨论】：

这段代码看起来怎么样？
列和行不同步。意思是对象头具有实际值等，但值与对象头不按顺序出现

标签： angular datatable material-design angular-material angular6

【解决方案1】：

表格的数据来源，可以通过三种方式提供（按复杂程度排序）：

简单数据数组（每个对象代表一个表格行）
每次数组更改时发出数据数组的流
实现连接/断开接口的数据源对象。

如果提供了数据数组，则必须在添加、删除或移动数组的对象时通知表。这可以通过调用 renderRows() 函数，它将呈现自上次以来的差异表渲染。如果数据数组引用发生变化，表格将自动触发对行的更新。

提供 Observable 流时，当流发出新的数据数组时，表会自动触发更新。

最后，当提供 DataSource 对象时，表将使用连接函数提供的 Observable 流，并在该流发出新的数据数组值时触发更新。在表的 ngOnDestroy 期间或从表中删除数据源时，表将调用 DataSource 的断开连接函数（可能有助于清理在连接过程中注册的任何订阅）。完整参考找到here

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

【讨论】：