как экспортировать первичную p-таблицу, используя angular - PullRequest
Новая
       12

как экспортировать первичную p-таблицу, используя angular

0 голосов
/ 25 марта 2020

Я использую основную P-таблицу, в которой есть итерации для вложенных и обычных объектов. поэтому я хочу, чтобы он экспортировался как csv, используя angular 6. И он экспортирует данные без вложенных столбцов объектов (столбцы, напечатанные из вложенных объектов, не экспортируются, jest экспортировал только заголовок столбца). Пожалуйста, помогите мне восстановить этот вопрос .

html: 

<p-panel class="ui-g-12 ui-lg-12 ui-md-12 ui-sm-12" >
      <p-header>
        <app-panel-header-spinner *ngIf="loadingReportsList"></app-panel-header-spinner>
        Transactions

        <ng-container *ngIf="showContentData && reportDataList.length > 0">
          <button icon="pi pi-file" class="pull-right" pButton type="button" label="Export CSV" (click)="dt.exportCSV()"></button>
        </ng-container>
      </p-header>

      <div *ngIf="reportDataList.length === 0" style="text-align: center">No data</div>

      <div [hidden]="!(reportDataList.length > 0)">

      <p-table [style]="{width: divToMeasureElementValue , minHeight:'400px'}" #dt [columns]="reportListCols"
               [value]="reportDataList"
               [paginator]="true"
               [rows] = 5
               [scrollable]="true"
               selectionMode="single"
               [(selection)]="selectedTrxnFromList"
      >
        <ng-template pTemplate="caption">
          <div style="text-align:left">
            <p-multiSelect [options]="reportListCols" [(ngModel)]="selectedColumns" optionLabel="header"
                           selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>
          </div>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of selectedColumns" [pSortableColumn]="col.field" [style.width]="col.width">
              <table><tr><td style="width: 20px;"><p-sortIcon [field]="col.field"></p-sortIcon></td><td>{{col.header}}</td></tr></table>
            </th>
          </tr>
          <tr>
            <th *ngFor="let col of selectedColumns" [ngSwitch]="col.field">
              <input style="width: 100%" pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode)">
            </th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-columns="selectedColumns">
          <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of selectedColumns" [style.width]="col.width">
              <div [ngSwitch]="col.field">
                <div *ngSwitchCase="'txnDate'">{{getDate(rowData['txnDate'])}}</div>
                <div style="text-align: right" *ngSwitchCase="'txnAmount'">{{rowData['txnAmount'] | currency:' ':'symbol-narrow':'.2-2'}}</div>
                <div style="text-align: right" *ngSwitchCase="'serviceChrgs'">{{rowData['serviceChrgs'] | currency:' ':'symbol-narrow':'.2-2'}}</div>
                <div style="text-align: right" *ngSwitchCase="'commission'">{{rowData['commission'] | currency:' ':'symbol-narrow':'.2-2'}}</div>
                <div  *ngSwitchCase="'fWalletType'">{{rowData['aNumber']['ab']['type']}}</div>
                <div  *ngSwitchCase="'fMobileNo'">{{rowData['aNumber']['ab']['no']}}</div>
                <div  *ngSwitchCase="'tWalletType'">{{rowData['bNumber']['ab']['type']}}</div>
                <div  *ngSwitchCase="'tMobileNo'">{{rowData['bNumber']['ab']['no']}}</div>
                <div *ngSwitchDefault>{{rowData[col.field]}}</div>
              </div>
            </td>
          </tr>
        </ng-template>
        <ng-template pTemplate="footer">
          <tr>
            <td *ngFor="let col of selectedColumns; let i = index;" [style.width]="col.width">
              <ng-container *ngIf="i === 0">Total</ng-container>
              <ng-container [ngSwitch]="col.field">
                <div style="text-align: right" *ngSwitchCase="'txnAmount'">{{getSum('txnAmount') | currency:' ':'symbol-narrow':'.2-2'}}</div>
                <div style="text-align: right" *ngSwitchCase="'serviceChrgs'">{{getSum('serviceChrgs') | currency:' ':'symbol-narrow':'.2-2'}}</div>
                <div style="text-align: right" *ngSwitchCase="'commission'">{{getSum('commission') | currency:' ':'symbol-narrow':'.2-2'}}</div>
              </ng-container>
            </td>
          </tr>
        </ng-template>
      </p-table>
      </div>
    </p-panel>
...