angular2表動態的行和列

Question

如何創建angular2

與動態列和行的表我有一個REST服務的數據來並抓獲在此觀察到

this._physicalDataService.getPhysicalData().subscribe(res=> this.data = res) 

我可以通過此代碼動態顯示行。我如何使列和列標題動態太多，即如何提取數組中的所有JSON鍵以將另一個循環放在頂部。

爲了說明我的後端服務可能會返回具有不同列和行的不同數據集，我想在頁面上動態顯示它們。

   <thead class="no-bd"> 
         <tr> 
          <th>Id</th> 
          <th>Number</th> 
          <th >Employee Name</th> 
          <th >Manager Name</th> 
         </tr> 
         </thead> 

         <tbody> 

         <tr *ngFor="let tablerows of data"> 
          <td> 
          {{tablerows.row_id}} 
          </td> 
          <td>{{tablerows.number}}</td> 
          <td >{{tablerows.employee_name}}</td> 
          <td >{{tablerows.manager_name}} 
          </td> 
         </tr> 

Answer 1

您也可以在<th></th>上使用相同的* ngFor。

但爲此，您將需要計算Object.It的長度，它會給你每個數組中的元素。

var custObject = new Object(); 
myArray["firstname"] = "Gareth"; 
myArray["lastname"] = "Simpson"; 
myArray["age"] = 21; 
this.objLength = Object.keys(myArray).length; // Calc length of Object i.e. 3 

你有對象的長度後，就可以使您的<th>塊，使用下面的管道多次：

<th *ngFor='#key of 5 | demoNumber;let i=index'> 
Column{{i}} 
</th> 

管：

import {Pipe, PipeTransform} from 'angular2/core'; 

@Pipe({name: 'demoNumber'}) 
export class DemoNumber implements PipeTransform { 
    transform(value, args:string[]) : any { 
    let res = []; 
    for (let i = 0; i < value; i++) { 
     res.push(i); 
    } 
    return res; 
    } 
} 

這將計算沒有對象字段&那麼ngFor將爲每個字段提供Coulmn +索引。

希望這會有所幫助。