【问题标题】:First column repeating in both froze & unfroze table in Primeng tablePrimeng 表中冻结和解冻表中的第一列重复
【发布时间】:2019-01-16 14:22:08
【问题描述】:

我正在做一个项目,我使用带有冻结和解冻列属性的PrimeNg 表,它在使用*NgFor 创建的普通列中工作正常,但是如果我添加没有*NgFor 的新列,它在冻结和重复解冻表格。

如何克服这个问题,因为我只希望该列在冻结列上而不是在解冻列上。

我的代码:

<ng-template pTemplate="header" let-columns>
    <tr>
      <th>All</th>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td>
                <p-tableCheckbox
                  [value]="rowData"
                  [attr.disabled]="
                    rowData.setupType === 'No Action' &&
                    rowData.currentStatus === 'INACTIVE'
                      ? 'disabled'
                      : null
                  "
                ></p-tableCheckbox>
              </td>
      <td *ngFor="let col of columns">
        {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>

列重复问题:

如何解决这个问题?

如果可能,请在PrimeNg 表中指导我。

【问题讨论】:

  • rowData 检查你得到的数组

标签: angular primeng primeng-table


【解决方案1】:

您需要使用模板frozenheader

<ng-template pTemplate="frozenheader" let-columns>
        <tr>
            <th>All</th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>

frozenbody

<ng-template pTemplate="frozenbody" let-rowData let-columns="columns">
        <tr>
            <td style="text-align: center">
                <p-tableCheckbox [value]="rowData" [attr.disabled]="
                    rowData.setupType === 'No Action' &&
                    rowData.currentStatus === 'INACTIVE'
                      ? 'disabled'
                      : null
                  "></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>

演示here

【讨论】:

  • 完美回答它按预期工作。谢谢@phucnh
猜你喜欢
  • 2019-06-08
  • 2017-12-17
  • 1970-01-01
  • 2016-12-02
  • 1970-01-01
  • 2016-08-15
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多