Определение matRowDef для массива дочерних элементов Nested Json в Angular Material - PullRequest
Новая
       5

Определение matRowDef для массива дочерних элементов Nested Json в Angular Material

0 голосов
/ 01 июня 2018

Это кажется довольно простым, но я не смог определить строку в matRowDef из внутреннего потомка json.Я использую угловой материал, в котором я новичок.Я пытаюсь реализовать таблицу материалов для отображения результата во вложенной строке.У меня есть 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>

, где displayColumns определяется как 

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

Iя пытаюсь отобразить MajorHead, SubMajorHead, MinorHead, SubMinorHead, DetailHead and ObjectHead в первом столбце, и соответствующая строка objectHead имеет значение фактических данных и оценок, которые я хочу показать в другом столбце.Теперь я пытаюсь перебрать строку во внутреннем элементе моего json, то есть ObjectHead.Есть ли способ сделать это?или мне нужно попробовать другой путь?Я новичок в AngularMaterial.

...