微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。