Dynamisch laden Spalten und Daten in Tabelle in Angular 2

Question

Ich habe eine HTML-Seite, in der ich eine Tabelle erstellen möchte. Die Spalten in dieser Tabelle sind dynamisch, was bedeutet, dass sie vom Server in eine Variable in der Komponente mit dem Typ "any []" abgerufen werden. 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 unten Code versucht, aber es scheint nicht zu funktionieren oder einen Fehler zu geben. Es erzeugt nur leeres "td" im "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 dem obigen Code werden die Spalte erfolgreich angelegt zu werden, aber die Daten und Spalte mash up funktioniert nicht. Ich bin mir sicher, dass es in Angular 2 einen Weg geben muss, 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 angemeldet sind immer in dem obigen Code zu trösten, aber nicht als pro meiner Studie in dem HTML-Code. Irgendwelche Ideen, bitte?

Aktualisiert: Just Interpolation wie folgt verwendet und es funktionierte

{{mydata [Spalte]}}

Answer 1

Statt

<tr *ngFor="#data of data"> 

der Verwendung sollten Sie verwenden

<tr *ngFor="#data of data" *ngModel="data[column]"> 

Answer 2

in Angular2 Beta-Version:

grid.html

<mat-table #table [dataSource]="dataSource"> 
    <ng-container [matColumnDef]="columnName" *ngFor="let columnName of displayedColumns"> 
    <mat-header-cell *matHeaderCellDef> {{columnName}} </mat-header-cell> 
    <mat-cell *matCellDef="let element"> {{element[columnName]}} </mat-cell> 
    </ng-container> 

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> 
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> 
</mat-table> 

grid.ts

export class GridDynamicComponent { 
    rows = new Array<CorporateEmployee>(); 
    dataSource: any; 
    displayedColumns = []; 
    yourFunction(...) { 
    rows = ... // Update your model 
    this.displayedColumns = rows.length > 0 ? Object.keys(rows[0]) : []; 
    this.dataSource = new MatTableDataSource(rows); 
    } 
} 

Answer 3

Meine Lösung ist Eingang() verwenden, Spalten- und Zeilen als Array in Datentabelle Komponente zu geben, ist es nur, dass Spalten rendert und Zeilen i will sehen:

in Komponente:

@Input('cols') 
    set cols(value: string){ 
    this._cols = value; 
    } 
    get cols(){ 
    return this._cols; 
    } 

    Input('rows') 
    set rows(value: string){ 
    this._rows = value; 
    } 
    get rows(){ 
    return this._rows; 
    } 

im Blick:

<app-data-table *ngIf="hotels" 
        [cols]="['Hotel Name','Status','Phone','Actions']" 
        [rows]="['HotelListTitle','HotelListSaleActive','HotelListPhone']" 
        [data]="hotels" 
        [excelData]="excelData"></app-data-table>