如何通過在Angular 2中檢查TD來將TH添加到TABLE中？

Question

我想自動生成thead和th，基於模板td：

<Datatable> 
    <tr #lineSelected *ngFor="let subscription of results"> 
     <td nameColumn="Nom">{{subscription.name}}</td> 
     <td nameColumn="Statut">{{subscription.status}}</td> 
     <td nameColumn="Origine">{{subscription.origin}}</td>       
     <td nameColumn="Date d'ajout">{{subscription.date}}</td> 
    </tr> 
</Datatable> 

現在：

<table>  
    <tbody> 
    <tr> 
     <td>name1</td> 
     <td>status1</td> 
     <td>origin1</td>        
     <td>date1</td> 
    </tr  
    <tr> 
     <td>name2</td> 
     <td>status2</td> 
     <td>origin2</td>        
     <td>date2</td> 
    </tr> 
    </tbody>  
</table> 

目標：

<table> 
    <thead> 
    <th>Nom</th> 
    <th>Statut</th> 
    <th>Origine</th> 
    <th>Date d'ajout</th> 
    </thead> 
    <tbody> 
    <tr> 
     <td>name1</td> 
     <td>status1</td> 
     <td>origin1</td>        
     <td>date1</td> 
    </tr  
    <tr> 
     <td>name2</td> 
     <td>status2</td> 
     <td>origin2</td>        
     <td>date2</td> 
    </tr> 
    </tbody>  
</table> 

這裏是我的component.ts

@Component({ 
    selector: 'Datatable', 
    template: ` 
     <table> 
      <ng-content></ng-content> 
     </table> 
    `, 
    styleUrls: ['./datatable.component.css'] 
    }) 
    export class DatatableComponent { 

    } 

我該怎麼做？

Answer 1

你的DataTable組件仍有改進的空間，但我可以在以後做到。 然而，爲了實現特定用例，你可以做的事情之一是：

一些-consumer.component.ts

這將是你在哪裏消費DataTable組件的組件。

@Component({ 
    selector: 'ConsumerComponent', 
    template: ` 
    <Datatable> 
    <tr> 
     <th *ngFor="let header of headers">{{ header }}</th> 
    </tr> 
    <tr #lineSelected *ngFor="let subscription of results"> 
     <td nameColumn="Nom">{{subscription.name}}</td> 
     <td nameColumn="Statut">{{subscription.status}}</td> 
     <td nameColumn="Origine">{{subscription.origin}}</td>       
     <td nameColumn="Date d'ajout">{{subscription.date}}</td> 
    </tr> 
    </Datatable> 
    `, 
}) 
export class ConsumerComponent implements OnInit { 
    public results = [{ 
    name: 'foo', 
    status: 'none', 
    origin: 'qux', 
    date: 'some-date-string' 
    }, { 
    name: 'baz', 
    status: 'nil', 
    origin: 'nil', 
    date: 'some-date' 
    }]; 
    public headers = [] as string[]; 

    ngOnInit() { 
    // If your result array comes from a service, you should have a check first. 
    this.headers = Object.keys(this.results[0]); 
    } 
} 

當然還有其他的方法可以做到這一點。