使用動態列將數據放入表中

我正在嘗試構建一個表，它將對我提交給它的數據進行無意識操作。這意味着我將把它傳遞給一個JSON對象（將來，現在我只是將它傳遞給幾個數組來測試），它將根據對象形成適當的列和行。我想要做的是採取頭數組中的元素，並形成我的列，並採取數據數組中的元素，並形成我的行。我構建了一對ng-repeat來處理對象循環，但當我的圖表形成時，沒有任何內容（我將提供一個屏幕截圖）。任何想法，爲什麼我的表不工作？這是我爲我的app.component.ts代碼：使用動態列將數據放入表中

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
<h1>{{ title }}</h1> 

<div > 
    <table border=1> 
      <tr> 
      <td ng-repeat="header in headers"> 
       <h2>{{header}}</h2> 
      </td>      
     </tr> 
     <tr ng-repeat="dp of data"> 
      <td ng-repeat="header in headers"> 
       {{dp[header]}} 
      </td> 
     </tr> 
    </table> 
</div> 
    `, 
    styles: [` 
    table, th , td { 
    border: 1px solid grey; 
    border-collapse: collapse; 
    padding: 5px; 
} 
table tr:nth-child(odd) { 
    background-color: #f1f1f1; 
} 
table tr:nth-child(even) { 
    background-color: #ffffff; 
} 
    `] 
}) 
export class AppComponent { 
    title = 'TestTable'; 
    headers = [{column:"ID",name:"Name"}]; 
    data = [ 
      {id:1,name:"Tony"}, 
      {id:2,name:"Zach"}, 
      {id:3,name:"Scot"}, 
     ];  
}

這裏是輸出：

這是我的錯誤，但我不認爲他們是這不是理由工作（我可能是錯的：

來源

2017-06-09 Joris

在角2，您需要使用NG-用於代替NG-REP吃。只需在標題和數據前添加此項。希望它能爲你工作。

export class AppComponent { 
constructor(){ 
    this.title = 'TestTable'; 
    this.headers = [{column:"ID",name:"Name"}]; 
    this.data = [ 
      {id:1,name:"Tony"}, 
      {id:2,name:"Zach"}, 
      {id:3,name:"Scot"}, 
     ];  
    }; 
}

這裏是工作Plunker的鏈接。謝謝。讓我知道你是否有其他疑問。

來源

2017-06-09 20:45:16

這導致它無法編譯，因爲它期望一個構造函數 – Joris

嘿@Joris我已經更新了評論。請檢查一下。我想現在你現在不再犯這個錯誤了。 –

這也打破了它。我不認爲你可以在AppComponent類 – Joris

使用動態列將數據放入表中

回答

相關問題