Question

我试图使用matrial-design在嵌套表中设计过去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引用但不能创建指令来映射列和行。如何获得所需的输出。

Answer 1

表的数据源，可以通过三种方式（以复杂性顺序）提供：

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

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

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

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

将json更改为扁平结构，并使用.ts文件中的ngIf="SomeFunction()"处理.html文件中的数据。

Angular 6中Material Design中的嵌套表行

1 个答案: