Javascript 不同级别的角度*Ng

我正试着学习如何使用打底。我使用p-table来遵循这个参考，我想要的是为使用ngfor的每一列提供动态宽度。到目前为止，我在cols数组中添加了另一列，以表示每列的类，如下所示

    this.cols = [
        { field: 'vin', header: 'Vin', class: 't-r' },
        {field: 'year', header: 'Year', class: 't-l' },
        { field: 'brand', header: 'Brand', class: 't-l' },
        { field: 'color', header: 'Color', class: 't-r' }
    ];

html文件

<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [ngClass] = "col.class">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

---

你可以试试ng容器

ng容器标记用于将节点分组在一起并支持结构指令。将渲染子节点，但不会渲染标记本身

这里有工作

动态列
{{col.header}}
{{rowData[col.field]}

.t-r{
    text-align: right; //working on string but not in date datatype
    width: 500px ; // not working
}