Использовать настраиваемый столбец в шаблоне l oop Angular

Question

Я написал следующий код:

table.component. html

<div class="mat-elevation-z8">

<table mat-table [dataSource]="tableDataSrc" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let col of tableCols">
        <ng-container matColumnDef="{{ col }}">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ col | titlecase }}
            </th>
            <ng-container *ngIf="!(col == 'view')" >
                <td mat-cell *matCellDef="let profile">{{ profile[col] }}</td>
            </ng-container>
            <ng-container *ngIf="col == 'view'" >
                <td matc-cell>Custom Value</td>
            </ng-container>
        </ng-container>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="tableCols"></tr>
    <tr mat-row *matRowDef="let row; columns: tableCols"></tr>
</table>

<mat-paginator (page)="pageChange.emit($event)"
               [pageSizeOptions]="[15]" 
               showFirstLastButtons
               [length]="length">
</mat-paginator>
</div>

team.component. html

<app-table *ngIf="!loading" (pageChange)="handlePageChange($event)" [tableData]="teams" [tableColumns]="tableCols" [length]="length"></app-table>

table.component.ts

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements OnInit {
  tableDataSrc: any;

  @Input('tableColumns') tableCols: string[];
  @Input() tableData: {}[] = [];
  @Input() length : number; 

  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

  @Output() pageChange = new EventEmitter<PageEvent>();

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges) {
    if(changes.tableData.currentValue) {
        this.tableDataSrc = new MatTableDataSource(this.tableData);
        this.tableDataSrc.sort = this.sort;
    }
}

}

team.component.ts

@Component({
  selector: 'app-teams',
  templateUrl: './teams.component.html',
  styleUrls: ['./teams.component.scss']
})
export class TeamsComponent implements OnInit {
  public teams : Array<Team>; 
  public length : any; 
  public loading : boolean = true; 

  tableCols = ['sofascore_id', 'name', 'view'];

  constructor(private teamService : TeamService) { }

  ngOnInit(): void {
    this.fetchTeams(); 
  }

  fetchTeams(pageNumber = 1){
    this.teamService.getTeams(pageNumber).subscribe(
      data => {

        this.teams = data.results
        this.length = data.count
        this.loading = false; 
      },
      error => {
        console.log(error.error)
      }
    )
  }

  handlePageChange(event: PageEvent) {
    // this.loading = true; 
    this.fetchTeams(event.pageIndex + 1)
  }

}

Когда Я запускаю этот код, страница отображается правильно, таблица загружается и заголовки столбцов заполняются в ней, но содержимое не загружается в таблицу. Удаление контейнеров ng, охватывающих элементы, содержащие td, и удаление последнего td, данные загружаются в таблицу правильно, но столбец 'view' остается пустым

Я хочу заполнить пользовательские данные в строке таблицы, когда имя столбца - 'view', используя написанный мной код, я получаю следующую ошибку: ERROR TypeError: "column.cell is undefined"