отображать динамический столбец c в таблице

Question

Попытка отобразить динамический c столбец внутри таблицы материалов.

       ZYX          XYZ
Job    technician   Developer  

Вот мой Json.

        "registration": [
        {
          "registrationId": 0,
          "category": "Job",
          "userDetails": [
                {
                  "jobId": 0,
                  "userId": 0,
                  "userName": "ZYX",
                  "jobDescription":"technician"
                },
                {
                  "jobId": 1,
                  "userId": 1,
                  "userName": "XYZ",
                  "jobDescription":"Developer"
                }
            ]
        }
    ]

Я пытаюсь получить доступ к имени пользователя с моим ниже Ц код. Но имя пользователя не отображалось.

        export class AssumptionStudyComponent implements OnInit {  
      @ViewChild(MatSort, { static: true }) sort: MatSort;
      @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
      public versionNum:string;
      public isLoading = true;

      version: any;
      unsubscribe: Array<Subscription> = [];

      bcnumber: string;
      ELEMENT_DATA = [];

      dynamicColumns: Array<any> = [];
      displayedColumns:  Array<any> = ['attrname'];

      studyDetailsArray:Array<any> =[];
      public dataSource;
      constructor( private studyCollaborationService: StudyCollaborationService, private dataService: DataService, private route: ActivatedRoute, private router: Router,) { }

      ngOnInit() {}
      getbasicdata(versionNum){

        if (versionNum != null && versionNum != undefined) {
        const studyDetails = this.dataService.getstudyDetailsData(this.bcnumber,this.versionNum).subscribe((response:any) => {
          console.log(response);
          this.studyDetailsArray = [];
          this.studyDetailsArray = Array.from(response.registration);
          // dynamic column display values
          this.ELEMENT_DATA = [];
          this.dynamicColumns = [];
          this.displayedColumns = ['attrname'];
          response.registration.forEach(item => {            
            console.log(response.registration)
            this.dynamicColumns.push(item.userDetails.userName);
            console.log(item.userDetails.userName);
            this.displayedColumns.push(item.userDetails.userName);
          });
          this.dataSource = this.ELEMENT_DATA;
          this.isLoading = false;
          this.dataSource = new MatTableDataSource(response);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.isLoading = false;
        }, (error) => {
          this.isLoading = false;
          console.log(error);
        });
        this.unsubscribe.push(studyDetails);
      }
      }
    }

Вот мой HTML код

    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 table">
    <!--   <ng-container matColumnDef="attrname" style="position: sticky;min-width: 200px;">
        <th mat-header-cell *matHeaderCellDef> Assumptions</th>
        <td mat-cell *matCellDef="let element"> {{element.attrname}} </td>  
      </ng-container> -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of dynamicColumns;">
        <th mat-header-cell *matHeaderCellDef>
          <div class="rotate">{{column}}</div> 
        </th>
        <td mat-cell *matCellDef="let element">
            <ng-container>
             <span>Checking</span>
            </ng-container>
        </td>
      </ng-container> 
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

Я получаю сообщение об ошибке ниже

ERROR Error: Duplicate column definition name provided: "undefined".

Пожалуйста, дайте мне знать что я тут делаю не так