Ramco Ramco

Ramco Ramco

  • 443
  • 3.1k
  • 436k

Error in Angular Material Table

Jul 2 2024 6:23 AM

Hi

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 = [];
<section class="content">
    <div class="content-block">
      <app-dynamic-mat-table [lstChild]="lstParent" [arrChildHead]="arrParentHead" ></app-dynamic-mat-table> 

    </div>
</section>
export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges {
  @Input() title?: string;
  
  @Input() arrChildHead: string[] = [];
  @Input() lstChild: any[] = [];
}
<div class="body overflow-auto">
          <div class="responsive_table">
            <mat-table [dataSource]="dataSource" class="w-100" matSort>
              <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>
      
              <tr mat-header-row *matHeaderRowDef="lstChild"></tr>
              <tr mat-row *matRowDef="let row; columns: lstChild;"></tr>
            </mat-table>
            <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
          </div>
        </div>