Можно ли иметь одну угловую таблицу материалов внутри другой?

Question

Можно ли иметь один матовый стол внутри другого матового стола? Внутренняя таблица должна отображаться при расширении строки таблицы mat. Я могу расширить таблицу и отобразить некоторое содержимое. Но когда я попытался вставить таблицу, я потерял связь со строкой, к которой принадлежит внутренняя таблица. Я имею в виду, когда я пытался вставить таблицу, я в конечном итоге отображал весь массив данных в одной строке вместо того, чтобы отображать каждый элемент в массиве в отдельной строке.

настольный component.html:

<div class="table-container">
  <app-double-row-paginator 
    #paginator [pageSize]="5" 
    [pageSizeOptions]="[5, 10, 20]" 
    style="text-align: right;">
  </app-double-row-paginator>

  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        No.
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{element.position}}
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Name
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{element.name}}
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Weight
      </mat-header-cell>
      <mat-cell *matCellDef="let element">
        {{element.weight}}
      </mat-cell>
    </ng-container>
    <ng-container matColumnDef="expanedDetail">
      <mat-cell *matCellDef="let detail">
        <!-- The symbol for {{detail.element.name}} is {{detail.element.symbol}}  -->
        <mat-table [dataSource]="hostData" width="100%">
          <ng-container matColumnDef="hosts">
            <mat-header-cell *matHeaderCellDef>
              Hosts
            </mat-header-cell>
            <mat-cell *matCellDef="let child">
              {{child.hosts}}
            </mat-cell>
          </ng-container>
          <ng-container matColumnDef="tasks">
            <mat-header-cell *matHeaderCellDef>
              Tasks
            </mat-header-cell>
            <mat-cell *matCellDef="let child">
              {{child.tasks}}
            </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="childDisplayedColumns">
          </mat-header-row>
          <mat-row *matRowDef="let child; columns: childDisplayedColumns">
          </mat-row>
        </mat-table>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns">
    </mat-header-row>
    <mat-row *matRowDef="let element; let row; columns: displayedColumns;"
      matRipple
      class="element-row"
      (click)="toggleRow(element)">
    </mat-row>
    <mat-row *matRowDef="let row; columns: ['expanedDetail']; when: isExpansionDetailRow"
      [@detailExpand]="row.element.show ? 'expanded' : 'collapsed'" style="overflow:hidden">
    </mat-row>
  </mat-table>
</div>

таблица-component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { DataSource } from '@angular/cdk/collections';
import 'rxjs/add/observable/of';
import { animate, state, style, transition, trigger } from '@angular/animations';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DoubleRowPaginatorComponent } from '../double-row-paginator/double-row-paginator.component';
import { element } from 'protractor';
import { MatTableModule } from '@angular/material';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
      state('expanded', style({ height: '*', visibility: 'visible' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TableComponent implements OnInit {
  displayedColumns = ['position', 'name', 'weight'];
  childDisplayedColumns = ['hosts', 'tasks'];
  dataSource: MatTableDataSource<any>;
  hostData: MatTableDataSource<any>;
  elementData: Element[];
  expandedElement: any;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(DoubleRowPaginatorComponent) customPaginator: DoubleRowPaginatorComponent;
  isExpansionDetailRow = (i: number, row: Object) => {
    console.log(row);
    return row.hasOwnProperty('detailRow');
  }

  constructor() { }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.getRows());
    this.hostData = new MatTableDataSource(this.getChildRows());
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.customPaginator;
  }

  getRows() {
    const rows = [];
    data.forEach(element => rows.push(element, { detailRow: true, element}));
    console.log('The rows are'+rows.forEach(element => console.log(element)));
    return rows;
  }
  getChildRows() {
    const rows = [];
    host.forEach(hostName => rows.push(hostName, {detailRow: true, hostName}));
    return rows;
  }
  toggleRow(value: Element) {
    const foundElement = this.dataSource.data.find(elem => elem.element !== undefined && elem.element.name === value.name);
    const index = this.dataSource.data.indexOf(foundElement);
    console.log(!this.dataSource.data[index].element.show);
    this.dataSource.data[index].element.show = !this.dataSource.data[index].element.show;
  }
}

export interface Hosts {
  hosts: string[];
  tasks: string[];
}
const host: Hosts[] = [
  {hosts: ['row1', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row2', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row3', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row4', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row5', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row6', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row7', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row8', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row9', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row10', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row11', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row12', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row13', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row14', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row15', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row16', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row17', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row18', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row19', 'host2'], tasks: ['task1', 'task2']},
  {hosts: ['row20', 'host2'], tasks: ['task1', 'task2']},
];
export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  show: boolean;
  hosts: string[];
  tasks: string[];
}

const data: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H', show: false ,
  hosts: ['host1 first row', 'host2 first row', 'host3'], tasks: ['task1', 'task2']},
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C', show: false ,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2']},
  { position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F', show: false,
   hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
  { position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca', show: false,
  hosts: ['host1', 'host2', 'host3'], tasks: ['task1', 'task2'] },
];