Data is not getting displayed

Question

Hi

  I have below Typescript for columns. I want to display data in Dynamic Table Component.

this.columns = [
      // { title: "Id", name: "empId" , visible: true },      
      { title: "Name", name: "empName" , visible: true },      
      { title: "Email", name: "empEmail" , visible: true },      
    ]

Below is the Data 

 

: {empId: 1512, empName: 'Mark1', empContactNo: '6754673254', empAltContactNo: '8762347483', empEmail: '[email protected]', …}

          <div class="responsive_table">
            <mat-table [dataSource]="dataSource" class="w-100" matSort>
              <ng-container *ngFor="let item of columns">
                <ng-container *ngIf="item.visible">
                  <ng-container [matColumnDef]="item.name">

                    <td mat-cell *matCellDef="let element; let i = index">
                      <ng-container
                        *ngIf="item.name !== 'actions' && item.name !== 'isActive' && item.name !== 'createdAt'  && item.name !== 'isTeaching' && item.name !== 'isCurrent' && item.name !== 'isAdmissionsOpen' && item.name !== 'startDate' && item.name !== 'endDate' && item.name !== 'flagIcon'  && item.name !== 'deletedAt'">
                        {{ element[item.name] }}
                      </ng-container>
                      

                    </td>
                  </ng-container>
                </ng-container>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </mat-table>
            <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
          </div>

Thanks