当行在 Angular 中动态渲染时如何将冻结列添加到 primeNG

Question

我正在寻求帮助，以在我的 primeng 表中添加冻结列功能，其中列和行是动态渲染的。

我确实有一个配置（isPK：true），它来自我想要制作冻结列的数据。

我尝试过遵循 stackblitz，但找不到与 PrimeNG 文档中给出的示例相匹配的解决方案

谢谢 @Owen 的回答，但现在如果我尝试在 HTML 本身中添加一个额外的列，它会像这样加倍，

https://stackblitz.com/edit/primeng-tablescroll-demo-jvmrfs

Answer 1

您应该使用冻结数据的模板，如模板部分的文档中所述：

frozenheader：冻结端的thead元素内容。

frozenbody：冻结端tbody元素的内容。

这是一个有效的示例。表体看起来很奇怪，但因为您使用的是动态列，所以列和数据之间必须匹配。

就像文档中的动态列的示例一样。

Answer 2

有时从工作示例中转移并逐步生成您想要的内容会更容易。像下面这样

<p-button class="secondary" label="Add row" (onClick)="onAddRow(card)"></p-button>


<p-table #dt [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="card" [scrollable]="true"
  scrollHeight="200px" frozenWidth="200px">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" style="width:200px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <ng-container *ngFor="let tr of card[0].rows; let i = index">
      <tr>
        <ng-container *ngFor="let attr of card[0].attributes; let j = index">
          <td
            [ngClass]="{'error-block': 
                                                            (card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true') ||
                                                            (card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value.length < card[0].rows[i][j].minLength)}">
            <ng-container *ngIf="attr.type === 'string'">
              <input pInputText style="width: 100%;"
                                                                    (ngModelChange)="onChange($event, i, j, card)"
                                                                    type="text"
                                                                    [(ngModel)]="card[0].rows[i][j].value"
                                                                    [maxlength]="card[0].rows[i][j].maxLength"
                                                                    [minlength]="card[0].rows[i][j].minLength"/>
              <span class="error required-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true'">
                                                                    <!-- This field is required. -->
                                                                </span>
              <span class="error minlength-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value.length < card[0].rows[i][j].minLength">
                                                                    <!-- Please enter {{card[0].rows[i][j].minLength}} characters to continue. -->
                                                                </span>
              <!-- {{i}}, {{j}} {{card[0].rows[i][j] | json}} -->
            </ng-container>
            <ng-container *ngIf="attr.values">
              <select class="dropdown" [(ngModel)]="card[0].rows[i][j].value" (ngModelChange)="onChange($event, i, j, card)">
                                                                    <option *ngFor="let option of attr.values">{{option}}</option>
                                                                </select>
              <span class="error required-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true'">
                                                                    <!-- This field is required. -->
                                                                </span>
            </ng-container>
            <ng-container *ngIf="attr.type === 'date'">
              <p-calendar [readonlyInput]="true" panelStyleClass="datepicker" appendTo="body"
                inputStyleClass="date-input" [(ngModel)]="card[0].rows[i][j].value"
                (ngModelChange)="onChange($event, i, j, card)" dateFormat="mm/dd/yy"></p-calendar>
            </ng-container>
          </td>
        </ng-container>
      </tr>
    </ng-container>
  </ng-template>
</p-table>

在此处查看演示

Answer 3

我在列定义中添加了一个属性 isFrozenColumn ，效果非常好
请参阅冻结列部分https://www.primefaces.org/primeng/showcase/#/table/scroll

columns = [
        {
            field: 'name',
            header: 'Name',
            isFrozenColumn: true
        },
        {
            field: 'Phone',
            header: 'phone',
            isFrozenColumn: false
        }]

标题

<th alignFrozen="left"  
        pFrozenColumn 
        [frozen]="true">Actions</th>
<ng-container *ngFor="let col of columns">
    <th class="width-small"
        alignFrozen="left"  
        pFrozenColumn 
        [frozen]="col?.isFrozenColumn">
        <p-header>{{ col.header }}</p-header>
    </th>
</ng-container>

身体

<td alignFrozen="left"  
        pFrozenColumn 
        [frozen]="true">
    <a type="button" 
        (click)="edit(item)">Edit</a>
    </td>
<ng-container *ngFor="let col of columns">
    <td alignFrozen="left"  
        pFrozenColumn 
        [frozen]="col?.isFrozenColumn">
        {{ item[col.field] }}
    </td>
</ng-container>

Answer 4

pFrozenColumn 在角度代码的非标题中不起作用。我们该如何解决它..