TDをAngular 2で調べると、TABLEにTHを追加する方法は？

Question

私は、テンプレート内tdに基づいて、自動的にtheadとth生成したいと思います：

今

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

もちろん、他の方法もあります。