Angular *NgFor不同的类答案

【问题标题】：Angular *NgFor different classAngular *NgFor不同的类
【发布时间】：2018-06-05 13:41:09
【问题描述】：

我正在尝试使用primeng 学习角度。我正在使用此参考https://www.primefaces.org/primeng/#/table 之后的 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>

我认为我的问题与Add classes within ngFor loop 很接近，但就我而言，我希望当前元素中的类而不是内部元素中的类。好的，我尝试了不同的属性，有些可以正常工作，有些不行。

类：

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

【问题讨论】：

标签： javascript angular frontend

【解决方案1】：

你可以试试 ng-container

ng-container 标签用于将节点分组在一起并支持结构指令。子节点被渲染，但标签本身没有被渲染。

这里正在工作demo

<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
          <ng-container *ngFor="let col of columns">
            <th [ngClass] = "col.class">
                {{col.header}}
            </th>
           </ng-container>
        </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>

【讨论】：