在自定义指令

Question

我是棱角分明的新手，试图让一段代码更精确。我正在使用primeNG中的dataTable，并且必须为每个列添加大量自定义格式。

<p-dataTable id="tsd" [value]="employeeData.workPrograms" *ngIf="employeeData" [responsive]="true" >
    <p-column header="{{getDayFormatted(0)}}" [style]="{'width':'50px'}">
        <ng-template pTemplate="header">
                <div>formatted column header</div>
        </ng-template>
        <ng-template let-ta="rowData" let-i="rowIndex" pTemplate="body">
            <div class="timesheetCell">
                <div class="timesheetCellData">{{ta.day1}}</div>
            </div>
        </ng-template>
    </p-column>
    <p-column header="{{getDayFormatted(1)}}" [style]="{'width':'50px'}">
        <ng-template pTemplate="header">
                <div>formatted column header</div>
        </ng-template>
        <ng-template let-ta="rowData" let-i="rowIndex" pTemplate="body">
            <div class="timesheetCell">
                <div class="timesheetCellData">{{ta.day2}}</div>
            </div>
        </ng-template>
    </p-column>
</p-dataTable>

上面的工作，但我会有一两个星期的专栏，当我真正想做的就是更改每一列的日期数据时，这可能会进入线条的困境。我希望能够做到这样的事情：

<p-dataTable id="tsd" [value]="employeeData.workPrograms" *ngIf="employeeData" [responsive]="true" >
    <workDayColumn  [dayData]="rowData.day1" [dayOfPayPeriod]="0" ></workDayColumn>
    <workDayColumn [dayData]="rowData.day2" [dayOfPayPeriod]="1" ></workDayColumn>
</p-dataTable>

隐藏自定义指令中的所有重复代码。

我认识到这种方法存在各种错误，例如在读取标签时没有定义rowData，并且标签首先没有被识别为p-dataTable的有效子元素。

这种问题有一些简单的解决方案吗？开始认为构建我自己的表可能更容易，而不是使用预制组件。