I have an html page in which I want to create a table. The columns in this
table are dynamic which means that they are fetched from the server in to a
variable in the component using "any[]" type. The data in this table is
also dynamic which means that at the time of programming I don't know which
columns and data will come to get bound in the table. I have tried below
code but it doesn't seem to work or give any error. It just creates empty
"td" in the "tbody".
*Expense.component.html*
<div class="panel panel-default" style="margin-top:10px;">
<div class="panel-heading">
Expenses
</div>
<div class="panel-body" style="position:relative">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th *ngFor="#column of columns">
{{column}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#data of data">
<td *ngFor="#column of columns">
* {{data.column}}*
</td>
</tr>
</tbody>
</table>
</div>
</div>
In the above code, the column are getting created successfully but the data
and column mash up is not working. I am sure there must be a way to achieve
this in Angular 2.
*Expense.component.ts*
export class ExpenseComponent implements OnInit {
errorMessage: any[];
columns: string[];
data: any[];
constructor(private _commonService: CommonService, private _expenseService:
ExpenseService) {
}
ngOnInit(): void {
this._commonService.getColumnNames('condomanagement', 'expenses')
.subscribe(data => this.promise(data), error => this.errorMessage =
<any>error);
}
private promise(data: string[]) {
this.columns = data;
this._expenseService.getExpenses('condomanagement', this.columns)
.subscribe(data => this.anotherPromise(data), error =>
this.errorMessage = <any>error);
}
private anotherPromise(data: any[]) {
this.data = data;
console.log(this.columns);
console.log(this.data);
}
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
The data is getting logged in to console in the above code but not working
in the html as per my trial. Any ideas, please?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
