primeng : 冻结列不适用于动态列

问题描述

问题：primeng：冻结列不适用于动态列。

代码详情：

检查下面的代码：

app.component.html：

<div class="card">
    <h5>Frozen Columns</h5>
    <p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="customers" [scrollable]="true" scrollHeight="200px" frozenWidth="300px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col *ngFor="let col of columns" style="width:300px">
            </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-customer let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    {{customer[col.field]}}
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

app.component.ts

import { Component } from '@angular/core';
import { CustomerService } from './customerservice';
import { Customer } from './customer';
import { FilterUtils } from 'primeng/utils';
import { LazyLoadEvent } from 'primeng/api';
import { SelectItem } from 'primeng/api';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',providers: [MessageService]
})
export class AppComponent {
  customers: Customer[];
  scrollableCols: any[];
  frozenCols: any[];

  constructor(private customerService: CustomerService) {}

  ngOnInit() {
    this.customerService.getCustomersLarge().then(data => {

      this.frozenCols = [{ field: 'name',header: 'Name' }]; // assume this column will come from database

      this.customers = data;

      this.scrollableCols = [
        { field: 'id',header: 'Id' },{ field: 'date',header: 'Date' },{ field: 'company',header: 'Company' },{ field: 'status',header: 'Status' },{ field: 'activity',header: 'Activity' }
      ]; // assume this column will come from database
    });
  }
}

OUTPUT : Frozen column 和 unfrozen column 不在同一行显示。

enter image description here

请帮我找到解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）