Question

看起来很简单，但是我无法在json的内部子节点中定义matRowDef中的行。我正在使用Angular Material，我是新手。我正在尝试实现Material表以在嵌套行中显示结果。我有json看起来像：

interface ObjectHead {
  objectHeadNumber?: string;
  objectHeadDescription?: string;
  actuals?: string;
  budgetEstimate?: string;
  revisedEstimate?: string;
  budgetEstimateCurrentYear?: string;
}
interface DetailHead {
  detailedHeadNumber?: string;
  detailedHeadDescription?: string;
  objectHeadDetails:ObjectHead[];
}
interface SubMinorHead {
  subMinorHeadNumber?: string;
  subMinorHeadDescription?: string;
  detailedHeadDetail:DetailHead[];
}
interface MinorHead{
  minorHeadNumber?: string;
  minorHeadDescription?: string;
  subMinorHeadDetail:SubMinorHead[];
}
interface SubMajorHead{
  subMajorHeadNumber?: string;
  subMajorHeadDescription?: string;
  minorHeadDetail:MinorHead[];
}
interface MajorHead{
  majorHeadNumber?: string;
  majorHeadDescription?: string;
  subMajorHeadDetail:SubMajorHead[];
}

const ELEMENT_DATA: MajorHead[] = [
  {
    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' },
                ]
             }]
          }]
       }]
   }]
}];

现在我将材质行和列定义为

 <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

其中displayedColumns定义为

displayedColumns = ['BudgetHead', 'Actuals','Budget_Estimate','Revised_Estimate', 'Budget_Estimate_Current_Year'];

我正在尝试在第一列中显示MajorHead, SubMajorHead, MinorHead, SubMinorHead, DetailHead and ObjectHead，并且objectHead的相应行具有我希望在另一列中显示的实际值和估计值。现在我试图在我的json的内部元素中迭代行，即ObjectHead。有办法吗？或者我需要尝试其他方式？我是AngularMaterial的新手。

将matRowDef定义为Angular Material中嵌套Json的子元素数组

0 个答案: