嵌套 table 行 Material 设计 Angular 6

Question

我正在尝试使用 matrial-design 在嵌套 table 中设计过去 3 年的财务支出报告。我希望输出看起来像我嵌套了 json，其中每个 parent 可以有 n 个 child。例如

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及其各自的头部可以重复。考虑到这一点，我正在尝试使用 material-table 设计 Table 但无法设计所需的 output.My 问题是我无法将实际列和其他右列映射到 object head 在 Head Dails 列中。因此，该行不匹配。我试图通过从中引用来创建指令来映射列和行，但无法这样做。如何才能得到想要的输出。

Answer 1

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

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

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

提供 Observable 流时，table 将在流发出新数据数组时自动触发更新。

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

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

嵌套 table 行 Material 设计 Angular 6

Nested table row in Material Design in Angular 6

datatable

material-design

angular-material

angular

angular6