Angular * Ng对于不同的类

Question

我试图用primeng学习角度。我正在使用p-table遵循此引用https://www.primefaces.org/primeng/#/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>

我认为我的问题接近于Add classes within ngFor loop，但在我的情况下，我希望当前元素中的类而不是内部元素。好吧，我已尝试过不同的属性，有些正在运行，有些则没有。

课程：

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

Answer 1

您可以尝试使用ng-container

ng-container标签用于将节点分组在一起并支持结构指令。呈现Childs节点但不呈现标记本身。

这是有效的

message