Estoy usando la tabla de datos Angular 5 y Angular Material para la construcción de los datos. Me refiero a un ejemplo en el siguiente sitio. En esta consideración, necesito incluir los datos dinámicos en cada fila como en la captura de pantalla donde 'favorito' es el encabezado de columna.

http://www.devglan.com/angular/angular-data-table-example

Muestra de Json para referencia cruzada.

constELEMENT_DATA: Element[
  
]=[
  {
    position: 1,
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]'favoriteColor: 'red',
    favorite: {
      favoriteFood: [
        'Idly',
        'Vada'
      ],
      favoriteCar: 'Mercendes Benz',
      favoriteMovie: 'JamesBond movie',
      favoritePlace: 'HillStation'
    }
  },
  {
    position: 1,
    firstName: 'Mike',
    lastName: 'Hussey',
    email: '[email protected]',
    favorite: {
      favoriteFood: 'Dosa',
      favoriteMovie: 'RajiniKandth movie'
    }
  },
  {
    position: 1,
    firstName: 'Ricky',
    lastName: 'Hans',
    email: '[email protected]',
    favorite: {
      favoriteFood: 'Chappathi',
      favoriteCar: 'BMW'
    }
  },
  {
    position: 1,
    firstName: 'Martin',
    lastName: 'Kos',
    email: '[email protected]'favorite: {
      
    }
  },
  {
    position: 1,
    firstName: 'Tom',
    lastName: 'Paisa',
    email: '[email protected]',
    favorite: {
      favoriteCar: 'Ford'
    }
  }
];

HTML:

<mat-table #table [dataSource]="dataSource">

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
      <mat-header-cell *matHeaderCellDef> Last Name </mat-header-cell>
      <mat-cell *matCellDef="let element">  <mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
      <mat-cell *matCellDef="let element">  </mat-cell>
    </ng-container>

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

Mi error no pude capturar la salida correctamente en la captura de pantalla. Si considera el nombre de John como primera fila, Food: ociosamente, Vada aparecerá en esa fila, pero la siguiente fila tendrá Car: Mercendes Benz, la siguiente fila tendrá la película JamesBond y la siguiente fila: HillStation. donde como todas las demás columnas que pertenecen a estas filas estarán en blanco. La próxima iteración comenzará con el nombre Ricky de manera similar. En el Json considera que todos estos artículos favoritos están debajo de favoritos.