«Не удалось найти столбец с идентификатором ...» при попытке создать angular таблицу матов из JSON

Question

Мне трудно создать динамически генерируемую angular таблицу матов из JSON. Это будет немного сложно объяснить, так как мне нужно иметь 4 компонента, работающих вместе, чтобы получить эту таблицу. Таблица будет выглядеть примерно так: Общая структура таблицы

Она получается из Json с этой структурой (только один элемент столбца и строки, чтобы не занимать слишком много места)

{"sessionID": "jdshfjksg12432dksfjl",
    "mainObjectGUID": "lmmljlmfdkjgkj- hsqjkhgdkqj - sqsfdzeg",
    "userGUID": "ushdshfjdfskjdshfjkdshkj",
    "column": [{
      "name": "ObjectGUID",
      "accessJSON": "objectGUID",
      "type": "String",
      "visible": false,
      "columnSize": null,
      "dropdownList": null,
      "controlType": null,
      "control": null
    },]
     "rows": [{
      "ObjectGUID": "djsklgfsdhjlk- fdhjhg - dkfsjgfl",
      "columnName": "idCompany",
      "Type": "Integer",
      "primaryKey": true,
      "Mandatory": true,
      "updated": false
    },]
}

Моя проблема в том, что я не могу жестко закодировать контейнеры для каждого столбца таблицы, так как они содержат разные типы данных (текст, поле выбора или флажок), и все должно создаваться динамически как Json изменится. Поэтому я создал 3 подкомпонента для трех ситуаций (текст, поле выбора и поле флажка). Пока я только попробую заставить работать текстовые данные.

Вот мой основной компонент

    import {Component, OnInit} from '@angular/core';
    // @ts-ignore
    import mockData from '../../../assets/mock.json';

    @Component({
      selector: 'app-tab',
      templateUrl: './tab.component.html',
      styleUrls: ['./tab.component.scss']
    })
    export class TabComponent implements OnInit {

      constructor() { }
      displayedColumns: string[] =[];
      dataSource: Array<any> = mockData.rows;
      columnNames: string[] = [];

      ngOnInit() {
        this.createColumnNamesAndDisplayed();
      }

      click() {
        console.log('data', this.dataSource);
      }

      createColumnNamesAndDisplayed(){
        for (const col of mockData.column){
          if (col.visible === true){
            this.columnNames.push(col.name);
            this.displayedColumns.push(col.accessJSON)
          }
        }

      }

      }

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" >

      <app-str-container *ngFor="let x of displayedColumns" colId={{x}} colName="Test data"></app-str-container>

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

    </table> 

И мой компонент для текстового контейнера

    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-str-container',
      templateUrl: './str-container.component.html',
      styleUrls: ['./str-container.component.scss']
    })
    export class StrContainerComponent implements OnInit {

      @Input() colName :string;
      @Input()   colId: string;


      constructor() { }


      ngOnInit() {
      }

    }

    <ng-container matColumnDef={{colId}}>
      <th mat-header-cell *matHeaderCellDef> {{colName}} </th>
      <td mat-cell *matCellDef="let element"> {{element.colId}} </td>
    </ng-container>

Мне странно, что я продолжаю получать сообщение об ошибке "Не удалось найти столбец с идентификатором" columnName ", полученное с tab.component. html, поскольку у меня уже была проблема, я понял ее и решил. Я новичок в angular, мне не очень удобно с привязкой или @input decorator. Если у вас есть другой способ добиться того, чего я хочу, не стесняйтесь сказать мне, я, вероятно, делаю что-то очень неправильно.