Расширенная таблица primeng не показывает строки таблицы - PullRequest
Новая
       28

Расширенная таблица primeng не показывает строки таблицы

0 голосов
/ 05 января 2019

Я хотел сделать несколько изменений в компоненте Table. Поэтому я расширил пользовательский компонент из primeng Table. Вот код моего проекта: проект

Вот код расширенной таблицы: 

import { Component, ElementRef, NgZone } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Table, TableService } from 'primeng/components/table/table';
import { DomHandler } from 'primeng/components/dom/domhandler';
import { ObjectUtils } from 'primeng/components/utils/objectutils';
import { Subject, Subscription } from 'rxjs';
@Component({
  selector: 'app-custom-table',
  template: `
        <div #container [ngStyle]="style" [class]="styleClass"
            [ngClass]="{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,
                'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),
                'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}">
            <div class="ui-table-loading ui-widget-overlay" *ngIf="loading"></div>
            <div class="ui-table-loading-content" *ngIf="loading">
                <i [class]="'ui-table-loading-icon pi-spin ' + loadingIcon"></i>
            </div>
            <div *ngIf="captionTemplate" class="ui-table-caption ui-widget-header">
                <ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
            </div>
            <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-top" [alwaysShow]="alwaysShowPaginator"
                (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition =='both')"
                [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"></p-paginator>

            <div class="ui-table-wrapper" *ngIf="!scrollable">
                <table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                    <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
                    <thead class="ui-table-thead">
                        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
                    </thead>
                    <tfoot class="ui-table-tfoot">
                        <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
                    </tfoot>
                    <tbody class="ui-table-tbody" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
                </table>
            </div>

            <div class="ui-table-scrollable-wrapper" *ngIf="scrollable">
               <div class="ui-table-scrollable-view ui-table-frozen-view" *ngIf="frozenColumns||frozenBodyTemplate" [pScrollableView]="frozenColumns" [frozen]="true" [ngStyle]="{width: frozenWidth}" [scrollHeight]="scrollHeight"></div>
               <div class="ui-table-scrollable-view" [pScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}"></div>
            </div>

            <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" [alwaysShow]="alwaysShowPaginator"
                (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')"
                [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"></p-paginator>
            <div *ngIf="summaryTemplate" class="ui-table-summary ui-widget-header">
                <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
            </div>

            <div #resizeHelper class="ui-column-resizer-helper ui-state-highlight" style="display:none" *ngIf="resizableColumns"></div>

            <span #reorderIndicatorUp class="pi pi-arrow-down ui-table-reorder-indicator-up" style="display:none" *ngIf="reorderableColumns"></span>
            <span #reorderIndicatorDown class="pi pi-arrow-up ui-table-reorder-indicator-down" style="display:none" *ngIf="reorderableColumns"></span>
        </div>
    `,
  providers: [DomHandler, ObjectUtils, TableService , Table]
})
export class CustomTableComponent extends Table {

  constructor(public el: ElementRef,
    public domHandler: DomHandler,
    public objectUtils: ObjectUtils,
    public zone: NgZone,
    public tableService: TableService) {
    super(el, domHandler,objectUtils, zone, tableService);
  }

}

Есть какая-то ошибка, потому что в исходном коде primeng TableModule они не объявляли и не экспортировали два компонента с именами TableBody и ScrollabelView, поэтому я сделал это сам, и после этого ошибки исчезли. Вы не можете исправить эти ошибки на stackblitz. Моя текущая проблема состоит в том, что таблица не показывает строки, и я не мог выяснить причину этой проблемы. Он просто отображает заголовок, но не другие строки. это снимок результата: таблица
почему это происходит?

1 Ответ

0 голосов
/ 06 января 2019

Я решил эту проблему. Я заметил, что все другие компоненты в primeng TableModule имеют экземпляр Table в своих конструкторах. поэтому я должен расширить все эти компоненты и вместо этого заменить этот экземпляр на CustomTableComponent. теперь он показывает строки данных. вот измененный код: custom-primeng

...