Data not getting displayed

Ramco Ramco

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;
  displayedColumns: string[] = [];
    constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource([]);
    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(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 : '';
  }  

  
  
}


          
            
                      
                
                   {{ column }} 
                   {{ element[column] }}

Thanks

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ramco Ramco2y ago
Hi Naimish

Below is the data returned

Thanks
Naimish Makwana2y ago
The error message TypeError: value.replace is not a function suggests that the value you’re trying to call replace on is not a string. In your case, it seems like the error is coming from the Angular Material Table’s _MatColumnDef._setNameInput method.

In your HTML template, you’re using lstChild as both the data source and the column definitions:
```
   {{ column }} 
   {{ element[column] }} 
```
Here, [matColumnDef]="column" expects column to be a string, but if lstChild contains non-string data, it could lead to the error you’re seeing.

You should ensure that lstChild only contains string values representing the column names. If lstChild is supposed to be your data, you might need a separate array for your column definitions. For example, you might need to define your columns like this:
```
   {{ column }} 
   {{ element[column] }} 
```
In this case, columnArray should be an array of strings where each string is a column name. This array would define the columns for your table. The lstChild array would then serve as the data source for the table. Please adjust your code accordingly and see if the issue gets resolved.

Thanks