Tengo una página HTML en la que quiero crear una tabla. Las columnas de esta tabla son dinámicas, lo que significa que se obtienen del servidor en una variable en el componente utilizandoany[] tipo. Los datos de esta tabla también son dinámicos, lo que significa que, en el momento de la programación, no sé qué columnas y datos se vincularán en la tabla.

He intentado debajo del código, pero no parece funcionar ni dar ningún error. Simplemente crea vacíotd en eltbody.

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>

En el código anterior, las columnas se crean con éxito, pero los datos y la combinación de columnas no funcionan. Estoy seguro de que debe haber una forma en Angular 2 para lograr esto.

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');
}
}

Los datos se inician sesión en la consola en el código anterior, pero no funcionan en el HTML según mi versión de prueba. Alguna idea, por favor?

Actualizado: solo utilicé la interpolación como esta y funcionó

{{mydata[column]}}