Угловой * НгДля другого класса - PullRequest
Новая
       20

Угловой * НгДля другого класса

0 голосов
/ 05 июня 2018

Я пытаюсь выучить угловой с primeng.Я использую p-таблицу, следуя этой ссылке 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>

Я думаю, мой вопрос близок к этому Добавление классов в цикле ngFor , но в моем случае я хочу, чтобы класс был в текущем элементе, а не во внутреннем.Хорошо, я пробовал разные свойства, и некоторые работают, а некоторые нет.

класс: 

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

1 Ответ

0 голосов
/ 05 июня 2018

Для этого можно попробовать ng-container

Тег ng-container используется для группировки узлов и поддержки структурных директив.Дочерние узлы отображаются, но сам тег не отображается.

Здесь работает демо 

<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>
...