Data not getting displayed

Question

Hi

  I am using Angular 17. Data is not getting displayed. Below is the code. 

TypeError: value.replace is not a function
    at _MatColumnDef._setNameInput (table.mjs:243:41)
    at set name (table.mjs:365:10)
    at applyValueToInputField (core.mjs:4035:29)
    at writeToDirectiveInput (core.mjs:11096:13)
    at setInputsForProperty (core.mjs:12391:9)
    at elementPropertyInternal (core.mjs:11692:9)
    at Module.??property (core.mjs:21289:9)
    at DynamicMatTableComponent_ng_container_19_Template (dynamic-mat-table.component.html:26:63)
    at executeTemplate (core.mjs:11268:9)
    at refreshView (core.mjs:12791:13)

export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges {
  @Input() title?: string;
  
  @Input() arrChildHead: string[] = [];
  @Input() lstChild: any[] = [];

  @Input() tabelData: any []= [];
  @Input() columnArray: string [] = [];

  @Input() isAction: boolean = false;

  @Input() columns: any = [];
  @Input() actionColumn: any = [];
  @Input() permission: any;
  dataSource: MatTableDataSource<any>;
  displayedColumns: string[] = [];
    constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource<any>([]);
    this.paginator = {} as MatPaginator;    
  }
  defaultImage:string='assets/images/icons/no-photo.png';
  ngOnInit(): void {  
   
    // this.pageSizeOptions = this._common.getPageSizeOptions();
    // this.displayedColumns = this.getDisplayedColumns();   
  }
  ngOnChanges(changes:SimpleChanges){     
    this.isLoading = true;  
    if (changes?.['lstChild'] && changes?.['lstChild'].currentValue) {    
      this.dataSource = new MatTableDataSource<any>(this.lstChild);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.isLoading = false;  
      console.log(this.lstChild);
    } 
  } 
  

  getDisplayedColumns(): string[] {
    return this.columns.filter((column:any)=>column.visible).map((column:any)=>column.name);
  }
  getColumnTitle(columnName: string): string {
    const column = this.columns.find((col:any) => col.name === columnName);
    return column ? column.title : '';
  }  

  
  
}

<div class="body overflow-auto">
          <div class="responsive_table">
            <mat-table [dataSource]="dataSource" class="w-100" matSort>
                      <!-- Dynamic Columns -->
                <ng-container *ngFor="let column of lstChild" [matColumnDef]="column">
                  <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
                  <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
                </ng-container>

                <!-- Header Row -->
                <tr mat-header-row *matHeaderRowDef="lstChild"></tr>
                <!-- Data Rows -->
                <tr mat-row *matRowDef="let row; columns: lstChild;"></tr>
            </mat-table>
            <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
          </div>
        </div>

Thanks