angular2 Tabelle mit dynamischen Zeilen und Spalten

Question

Wie kann ich eine Tabelle mit dynamischen Spalten und Zeilen in angular2

erstellen habe ich die Daten aus einer Ruhe Dienst kommen und in diesen beobachtbaren

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

kann ich gefangen Zeigen Sie die Zeilen dynamisch über diesen Code an. Wie mache ich die Spalten und die Spaltenüberschriften dynamisch? Wie kann ich alle JSON-Schlüssel in einem Array extrahieren, um eine weitere Schleife darüber zu legen.

Um meinen Back-End-Dienst zu klären, können verschiedene Datensätze mit unterschiedlichen Spalten und Zeilen zurückgegeben werden und ich möchte sie auf einer Seite dynamisch anzeigen.

   <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

Sie können auch auf Ihrem <th></th> gleichen * ngFor verwenden.

Aber dafür müssen Sie die Länge von Object.It berechnen. Geben Sie keine Elemente in jedem Array.

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 

Nachdem Sie Länge von Objekt haben, können Sie Ihr <th> Block machen, dass viele Male unter Rohr mit:

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

Rohr:

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; 
    } 
} 

Das ist kein Objektfelder berechnen wird & dann wird ngFor Coulmn + Index für jedes Feld rendern.

Hoffe, das hilft.