Предоставлено повторяющееся имя определения столбца: "fromWhere". делая таблицу в расширенном ряду

Question

, как в заголовке, я пытаюсь сделать сайт, где у меня есть таблица и в расширенной строке другой таблицы. я использовал, например, https://stackblitz.com/edit/angular-material2-issue-a8kjon?file=app%2Ftable%2Ftable.component.ts, чтобы найти какой-то ответ, я знаю, что есть похожие вопросы, но я борюсь с ним в течение длительного времени и не могу найти ответ

мой html

<div align="center" *ngIf="showConnections">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
    <th mat-header-cell *matHeaderCellDef> {{column.header}} </th>
    <td mat-cell *matCellDef="let ticket"> {{ticket[column.columnDef]}} </td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let ticket" [attr.colspan]="displayedColumns.length">
      <div class="example-element-detail" *ngIf="ticket.tickets.length"
           [@detailExpand]="ticket == expandedElement ? 'expanded' : 'collapsed'">
                <div class="inner-table"  *ngIf="expandedElement">
          <table class="inner-table mat-elevation-z8"  mat-table [dataSource]="ticket.tickets">
            <ng-container *ngFor="let column of innerColumns" [matColumnDef]="column.columnDef">
              <th mat-header-cell *matHeaderCellDef> {{column.header}} </th>
              <td mat-cell *matCellDef="let element"> {{element[column.columnDef]}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
          </table>
                </div>
            </div>
        </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" 
  [class.example-element-row]="element.tickets.length"
  [class.example-expanded-row]="expandedElement === element" 
  (click)="ToggleRow(element); CreateLog(element);">
  </tr>
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
</div>

мой файл TS

import { IBigTicket, ITicket } from './../bigTicket';
import { Component, OnInit } from '@angular/core';
import { CitiesService } from '../services/cities.service';
import { Router, ActivatedRoute } from '@angular/router';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-tickets',
  templateUrl: './tickets.component.html',
  styleUrls: ['./tickets.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TicketsComponent implements OnInit {
  columns = [
    { columnDef: 'fromWhere', header: 'From:',    cell: (ticket: IBigTicket) => `${ticket.fromWhere}` },
    { columnDef: 'departureTime', header: 'Departure time:', cell: (ticket: IBigTicket) => `${ticket.departureTime}` },
    { columnDef: 'toWhere', header: 'To:',   cell: (ticket: IBigTicket) => `${ticket.toWhere}` },
    { columnDef: 'arrivalTime', header: 'Arrival time:', cell: (ticket: IBigTicket) => `${ticket.arrivalTime}` },
    { columnDef: 'wholePrice', header: 'Ticket price:', cell: (ticket: IBigTicket) => `${ticket.wholePrice}` }
  ];
  innerColumns = [
    { columnDef: 'fromWhere', header: 'From:', cell: (route: ITicket) => `${route.fromWhere}` },
    { columnDef: 'departureTime', header: 'Departure:', cell: (route: ITicket) => `${route.departureTime}` },
    { columnDef: 'toWhere', header: 'To:', cell: (route: ITicket) => `${route.toWhere}` },
    { columnDef: 'arrivalTime', header: 'Arrival:', cell: (route: ITicket) => `${route.arrivalTime}` }
  ];
  displayedColumns: string[] = this.columns.map(c => c.columnDef);
  innerDisplayedColumns: string[] = this.innerColumns.map(c => c.columnDef);
  public tickets: IBigTicket[] = [];
  dataSource = new MatTableDataSource(this.tickets);
  expandedElement: IBigTicket | null = null;
  public price: string;
  public errorMsg: string;
  public showConnections = false;

  constructor(private citiesService: CitiesService,
              private router: Router,
              private route: ActivatedRoute) { }

  ngOnInit() {
  }

  ShowConnections() {
    this.showConnections = true;
  }

  CreateLog(some) {
    console.log(some);
    console.log(this.expandedElement);
  }

  ToggleRow(element: IBigTicket) {
    this.expandedElement = this.expandedElement === element ? null : element; /*
    if (element === this.expandedElement) {
        this.expandedElement = null;
      } else {
        this.expandedElement = element;
      }*/
  }

  SearchTicket(fromCity: string, toCity: string) {
    this.errorMsg = '';
    this.citiesService.GetTicket("Graz", "Vienna")
    .subscribe(data => {
      this.tickets = data,
      this.dataSource.data = this.tickets;
    },
    error => this.errorMsg = error);
    // this.price = this.tickets[0].wholePrice;
    console.log('Ticket query send.');
    this.ShowConnections();
  }
}

и css при необходимости

    height: 0;
  }

  tr:hover{
    background-color:#777;
  }

  tr .example-element-row:not(.example-expanded-row):hover {
    background: #777;
  }

  tr .example-element-row:not(.example-expanded-row):active {
    background: #efefef;
  }

  .example-element-row td {
    border-bottom-width: 0;
  }

  .example-element-detail {
    overflow: hidden;
    display: flex;
  }

  .mat-table {
      width: fit-content;
      min-width: 40%;
  }

  .inner-table {
    width: 100%;
  }

  .mat-header-cell, .mat-cell{
    text-align: center;
  }

заранее спасибо