テーブルに列とデータを動的に読み込む2

Question

テーブルを作成するhtmlページがあります。この表の列は動的です。つまり、サーバーから「any []」型を使用してコンポーネント内の変数にフェッチされます。この表のデータも動的です。つまり、プログラミング時に、どの列とデータがテーブルにバインドされるのかわかりません。

私は以下のコードを試しましたが、うまく動作しないか、エラーが発生しているようです。これは単に "tbody"に空の "td"を作成します。上記のコードで

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> 

、列が正常に作成取得されますが、データや列マッシュアップが機能していません。私はこれを達成するために角度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で動作していないなっています。どのようなアイデアをしてください？

更新日：ちょうどあなたが

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

Answer 1

を働きましたAngular2ベータ版：

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 2

を使用する必要があり、このように補間を使用して、代わりに

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

を使用しての

{{mydataという[コラム]}}

Answer 3

マイ溶液は、データテーブルコンポーネントに配列された列と行を与える）（入力を使用している、それだけで、その列をレンダリング私が見たい行：

コンポーネント：

ビュー内

：

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