如何通过检查 Angular 2 中的 TD 将 TH 添加到 TABLE 中？答案

【问题标题】：How to add TH into TABLE by checking TD in Angular 2?如何通过检查 Angular 2 中的 TD 将 TH 添加到 TABLE 中？
【发布时间】：2017-11-01 11:07:02
【问题描述】：

我想根据模板中的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>

这是我的组件.ts

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

  }

请问我该怎么做？

【问题讨论】：

你想在哪里定义内容？
@MarkusKollers 谢谢你的回答，你能检查我的编辑吗？
我不知道你为什么要根据td自动生成thead和th。不知道默认情况下表中的列数？
@Steffi 如果我理解正确，您想根据传递给表行的值动态生成表头吗？
@Umair 是的！！！这是正确的！表头计数基于表行。表头的值基于 nameColumn 属性。

标签： javascript angular typescript angular2-template

【解决方案1】：

您的DataTable 组件仍有改进的空间，但我可以稍后再谈。但是，要实现您的特定用例，您可以做的事情之一是：

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

当然还有其他方法。

【讨论】：

感谢您的回答。不能从“nameColumn”属性生成th的值吗？
我不相信这是可能的。如果您想拥有与对象键不同的表头，还有其他方法可以做到这一点。如果您追求的是这种情况，我可以修改我的答案。
这个想法是和 AllenFang 的 Bootstrap React Table 做同样的事情