Error in Angular Material Table

Api - onlinetestapi.gerasim.in/api/TeamSync/GetAllEmployee

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:25:61)
at executeTemplate (core.mjs:11268:9)
at refreshView (core.mjs:12791:13)

 arrParentHead = ['Name','Email']

  lstParent: any = [];

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


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

I am not expert of Angular but I worked with it few years ago. From the error you are getting I think Angular Material table component is expecting a certain data type (usually a string) for certain operations (like sorting or filtering) but is instead receiving a value that isn't a string or isn't compatible with the replace method.

It seems that lstParent is an array of objects, but the mat-table expects an array of objects where each object has properties that are strings or numbers. If any property in your data is not a string (like an array or a number), it might be causing this issue.

Also, in your template, you're looping through lstChild which is an array of columns and binding it to matColumnDef.

lstChild needs to match the structure expected by the table so it should be a list of strings representing column names, and each corresponding element[column] should be accessible.

1 Reply

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

Amira Bedhiafi1y ago
I am not expert of Angular but I worked with it few years ago. From the error you are getting I think Angular Material table component is expecting a certain data type (usually a string) for certain operations (like sorting or filtering) but is instead receiving a value that isn't a string or isn't compatible with the replace method.

It seems that lstParent is an array of objects, but the mat-table expects an array of objects where each object has properties that are strings or numbers. If any property in your data is not a string (like an array or a number), it might be causing this issue.

Also, in your template, you're looping through lstChild which is an array of columns and binding it to matColumnDef.

lstChild needs to match the structure expected by the table so it should be a list of strings representing column names, and each corresponding element[column] should be accessible.