How to dynamically load data in table's row in Angular 4

Question

I am creating a custom data table for a project using angular 4 where table columns and rows element will be bind dynamically. I have created variables for columns name in typescript file.

columns = [
    { key: 'Username', title: 'User Name', isSortable: true },
    { key: 'FullName', title: 'Full Name', isSortable: true},
    { key: 'Email', title: 'Email', isSortable: true}
];

I have populated table using service call from a component.

constructor(private employeeService: EmployeeService, private router: Router) {
    this.Employee = [];
 }

private populateEmployee() {

    this.employeeService.getPagedEmployees(this.query).subscribe(Result => {
        this.Employee = <IEmployeeInterface[]>Result["data"],
            this.query.totalItems = Result["count"]
    });
}

This calls the Employee from angular service function.

getPagedEmployees(filter): Observable<IEmployeeInterface[]> {

    var jsonString = JSON.stringify(filter);
    return this.http.get(this.baseUrl + 'GetEmployeeUrl').map((response: Response) => {
        return response.json();
    })
        .catch(this.handleError);
}

I am trying to bind the data table in the template file. Here Employee is array of IEmployeeInterface

  Employee: IEmployeeInterface[];

where IEmployeeInterface is

export interface IEmployeeInterface {
    Id: number,
    username: string,
    fullname: string,
    email: string
 }

The table in which I am binding data is like this.

<table class="table table-bordered table-striped table-hover dataTable">
     <tr>
        <th *ngFor="let c of columns">
            <div *ngIf="c.isSortable" (click)="SortBy(c.key)">
                {{ c.title }}
                    <i *ngIf="query.sortBy === c.key" class="fa" 
                             [class.fa-sort-asc]="query.isSortAscending"
                             [class.fa-sort-desc]="!query.isSortAscending">
                    </i>
            </div>
            <div *ngIf="!c.isSortable">
                    {{ c.title }}
            </div>
       </th>
    </tr>
  </thead>
<tbody>
    <tr *ngFor="let data of Employee" >
       <td *ngFor="let column of columns">
            {{data[column.key]}}
       </td>
    </tr>
</tbody>
</table>

{{data[column]}} returns empty value. where as Column header is properly being rendered. I tried the method from here but it didn't work in angular 4. Dynamically loading columns and data into tables in angular 2

Answer 1

You write:

   <td *ngFor="let column of dcolumn">
        {{data[column]}}
   </td>

The code you posted does not define dcolumn. Might dcolumn be undefined? Or be something other than a string[]?