小编Ser*_*ado的帖子

我正在构建一个数据表组件,它被设计为非常通用的组件.

我们的想法是将表定义为:

<app-datatable [items]="currentPageResult">
    <app-datatable-column attribute="id"
                          header="ID"></app-datatable-column>
    <app-datatable-column attribute="name"
                          header="First Name"></app-datatable-column>
    <app-datatable-column attribute="last_name"
                          header="Last Name"></app-datatable-column>
</app-datatable>

通过这种方式,我们可以将数组指定到数据表组件中,通过定义数据表列,我们可以决定应该显示表格.在内部,表将按列和另一个ngFor按项执行ngFor.

这部分很简单,现在它运行得很好,当我想要自定义html内容到td时,事情变得棘手; 像这样的东西:

<app-datatable [items]="currentPageResult">
    <app-datatable-column attribute="id"
                          header="ID"
                          [template]="titleTemplate">
        <ng-template #titleTemplate>
            <a role="button" [routerLink]="[data.id]">
                {{data.id}}
            </a>
        </ng-template>
    </app-datatable-column>
    <app-datatable-column attribute="name"
                          header="First Name"></app-datatable-column>
    <app-datatable-column attribute="last_name"
                          header="Last Name"></app-datatable-column>
</app-datatable>

请注意,我使用的data是迭代变量,但它实际上不起作用,我只是说明了我想要做的事情.

为了解决这个问题,我使用'$ data'作为简单字符串和自定义指令将'$ data'替换为相应的列/行值.

在数据表组件中,我appDatatableContent在每个tbody tdpassig 上使用了一个指令row数据和colum设置(该指令仅在colum设置有模板时才适用):

<table class="table">
  <thead>
    <tr>
      <th *ngFor="let col of columns" [ngClass]="getColumnHeaderClasses(col)" (click)="onReorder(col)">{{col.header}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of items.Items">
      <td …