Ich habe eine HTML-Seite, in der ich eine Tabelle erstellen möchte. Die Spalten in dieser Tabelle sind dynamisch, was bedeutet, dass sie mit @ vom Server in eine Variable in der Komponente abgerufen werdeany[] Art. Die Daten in dieser Tabelle sind ebenfalls dynamisch, was bedeutet, dass ich zum Zeitpunkt der Programmierung nicht weiß, welche Spalten und Daten in der Tabelle gebunden werden.

Ich habe versucht, unter Code, aber es scheint nicht zu funktionieren oder Fehler zu geben. Es schafft nur leeretd in demtbody.

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>

Im obigen Code werden die Spalten erfolgreich erstellt, aber das Daten- und Spalten-Mashup funktioniert nicht. Ich bin mir sicher, dass es in Winkel 2 einen Weg geben muss, um dies zu erreichen.

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

Die Daten werden im obigen Code an der Konsole angemeldet, funktionieren jedoch nicht im HTML-Format gemäß meiner Testversion. Irgendwelche Ideen, bitte?

Updated: Hab gerade so eine Interpolation benutzt und es hat funktioniert

{{mydata[column]}}