У меня есть HTML-страница, на которой я хочу создать таблицу. Столбцы в этой таблице являются динамическими, что означает, что они выбираются с сервера в переменную в компоненте, используяany[] тип. Данные в этой таблице также являются динамическими, что означает, что во время программирования я не знаю, какие столбцы и данные попадут в таблицу.

Я попробовал приведенный ниже код, но он, похоже, не работает и не дает никаких ошибок. Это просто создает пустойtd в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>

В приведенном выше коде столбцы создаются успешно, но данные и коллажи не работают. Я уверен, что в 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');
}
}

Данные загружаются в консоль в приведенном выше коде, но не работают в HTML согласно моей пробной версии. Есть идеи, пожалуйста?

Обновлено: просто использовал интерполяцию, как это, и это сработало

{{mydata[column]}}