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

That doesn't look like it is related to Angular, data[column] just doesn't contain a value. I don't see how the first 2 code snippets are related to the question or the part before <tbody> in the 3rd code snipped. What we need to see is the content of Employee and dcolumn. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 29, 2017 at 12:29
My apologies. I have corrected the question. I am not sure if I can correct it directly or should I have to add edit tags. It's "columns" instead of "dcolumn". I want something like {{data[column.key]}} to bind data from employee in each row for each column — Pitambar Jha
– Pitambar Jha, Commented Aug 29, 2017 at 12:35
That should work, but your question still doesn't show what data Employee contains. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 29, 2017 at 12:40
Thanks, I added as per your suggestion in the question. Employee is array of IEmployeeInterface where IEmployeeInterface has same name as that of columns key name. though {{data[column.key]}} shows empty value, {{data['Username']}} and {{data['username']}} shows appropriate value that I needs — Pitambar Jha
– Pitambar Jha, Commented Aug 30, 2017 at 3:58
The interface type doesn't provide much info. Relevant is only what the actual data looks like. — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 30, 2017 at 4:04

meriton · Accepted Answer · 2017-08-29 12:30:12Z

0

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[]?

answered Aug 29, 2017 at 12:30

meriton

70.9k14 gold badges117 silver badges190 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pitambar Jha Over a year ago

It's "columns" instead of "dcolumn". I want something like {{data[column.key]}} to bind data from Employee in each row for each column. I have updated the question. My apologies. Even I tried putting column name in string[] format but that does not work either.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related