Daten in eine Tabelle mit dynamischen Spalten einfügen

Question

Ich versuche, eine Tabelle zu erstellen, die Agnostisch von den Daten funktioniert, die ich an sie sende. Das bedeutet, dass ich ihm ein JSON-Objekt übergeben werde (in Zukunft werde ich gerade ein paar Arrays zum Testen übergeben) und es werden die entsprechenden Spalten und Zeilen entsprechend dem Objekt gebildet. Was ich tun möchte, ist, die Elemente im Header-Array zu nehmen und meine Spalten zu bilden und die Elemente im Daten-Array zu nehmen und meine Zeilen zu bilden. Ich habe ein paar ng-repeat erstellt, um die Objekte zu durchlaufen, aber wenn sich mein Diagramm bildet, ist nichts drin (ich werde einen Screenshot bereitstellen). Irgendwelche Ideen, warum mein Tisch nicht funktioniert? Hier ist mein Code für meine 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"}, 
     ];  
} 

Hier ist der Ausgang:

mein Fehler hier, aber ich glaube nicht, sind sie der Grund, es ist nicht

Answer 1

In Winkel 2 Sie verwenden müssen ng-für statt ng-rep: arbeiten (ich konnte zwar falsch sein Essen. Fügen Sie das einfach vor Kopfzeilen und Daten hinzu. Hoffe, es wird für dich arbeiten.

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"}, 
     ];  
    }; 
} 

Hier ist die funktionierende Plunker Verbindung. Danke. Lassen Sie es mich wissen, wenn Sie eine andere Frage haben.