标签: primeng-table

我有像数组一样的数据点。所以我试图在数组中搜索值，但它不能在priming中工作

在组件文件中，我有下面的代码部分，

tableHeader = [
    { field: 'name', header: 'Name' },
    { field: 'skills', header: 'Skills' },
];

modelData = [
    { "label": "HTML", "value": "HTML" },
    { "label": "Css", "value": "Css" },
    { "label": "Angular", "value": "Angular" },
    { "label": "Python", "value": "Python" },
    { "label": "Perl", "value": "Perl" },
    { "label": "JS", "value": "JS" },
    { "label": "Java", "value": "Java" }
];

data = [
    {
        name:"User1",
        skills:["JS","Java","Angular"]
    },{
        name:"TestUser",
        skills:["HTML","Css"]
    },{
        name:"Root",
        skills:["HTML","Css","Angular","Python","Perl"]
    }
];

和HTML是

<p-table …

我们有一个嵌套 JSON 对象，用于对象导出 CSV 的平面级别的 json 正在工作，但对于嵌套对象，它不起作用（站点对象）。

对于这个实现，我们使用了 PrimeNg 库：

以下是json响应：

 "data": [
        {
            "towerId": "gfsjfdy32ur",
            "towerName": "qjdhkud",
            "exAxisTower": false,
            "tbuShareable": null,
            "technologyPartnerRNP": "TP_RNP_EID",
            "technologyPartnerTNP": "TP_TNP_EID",
            "ssrLongitude": "323",
            "ssrLatitude": "323",
            "region": "REG_J",
            "province": "PROV_SU",
            "district": "PROV_SU_D1",
            "scheme": null,
            "towerType": "TYPE_CL",
            "towerKind": null,
            "category": "CAT_SM",
            "proposedHeight": 323,
            "useShelter": "SHELT_Y",
            "azimuth": "dewdew",
            "towerProviderNumber": null,
            "towerProviderName": null,
            "farEnd1": null,
            "farEnd2": null,
            "farEnd3": null,
            "towerStatus": "Plan on Progress",
            "projectStatus": "SSR Completed",
            "sites": [
                {
                    "id": "6a056c60-5774-40ad-bd00-2523cbfdb8a4",
                    "created": "2019-12-09T10:52:18.293+0000",
                    "createdId": "ff06c5a4-135c-40b7-83f3-3648ec035efc",
                    "modified": "2019-12-09T10:52:18.293+0000", …

让我们考虑下面是angular 的素数表：

我使用了primeng表库来列出记录并下载csv。

<p-table #dt styleClass="table table-striped" [columns]="colsCSV" [value]="reviewSSRList" selectionMode="single"  [paginator]="true" [rows]="10">
      <ng-template pTemplate="caption">
        <div class="ui-helper-clearfix" style="text-align: left">
            <button type="button"  pButton icon="pi pi-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:right;"></button>
        </div>
    </ng-template>  
      <ng-template pTemplate="header" let-columns>
            <!-- <tr>  
                <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                    {{col.header}} 
                    <p-sortIcon [field]="col.field"></p-sortIcon>
                </th>
            </tr> -->
            <tr>
              <th style="text-align: center;" > Check & Delete
                  <!-- <p-sortIcon [field]="'towerId'"></p-sortIcon> -->
              </th>
              <th [pSortableColumn]="'towerId'">Tower ID
                  <p-sortIcon [field]="'towerId'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'towerName'">Tower Name
                  <p-sortIcon [field]="'towerName'"></p-sortIcon>
              </th>
              <th [pSortableColumn]="'exAxisTower'">Ex …

我花了很长时间找出如何在 PrimeNG 末尾执行一个简单的汇总函数p-table。例如，如果我想对表的最后一行中的特定列进行总计，或者显示整数值的最小值，或者对表中可见的任何行进行类似 \xe2\x80\x94 的任何其他汇总操作当时。

我尝试通过访问Table组件中的 PrimeNG 对象本身来滚动自己的对象：

@ViewChild(\'dt\', { static: true }) private dt: Table;

然后查看该via的内容

console.table(this.dt)

一旦我在任何列过滤器中输入了一些内容，我就可以访问filteredValue的属性。this.dt但我无法访问 或 中的this.dt.value内容this.dt._value。PrimeNG\ 的文档提到了“摘要部分”，但没有提供有关如何在该部分中执行摘要函数的指导：

表的 P​​rimeNG 文档

困惑。

我正在尝试为使用 PrimeNG 表的角度组件创建单元测试。它在浏览器内与ngserve一起按预期工作，但在 Jasmine 测试中我无法获取表格的渲染 HTML。当我检查标记时，它只包含以下行：

<p-table class="testtable"><!--container--><!--container--></p-table>

我创建了一个仅包含静态数据的新组件来重现该问题：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  template: `
  <p-table class="testtable" [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>
  `
})
export class TestComponent implements OnInit {

  cars = [
    {"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
    {"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
    {"brand": "Renault", "year": 2005, "color": "Gray", "vin": …

我正在开发一个项目，在该项目中，我使用了PrimeNg带有 froze & unfroze 列属性的表，并且它在创建普通列时工作正常，*NgFor但是如果我添加新列而不*NgFor在 froze 和 unfroze 表中重复。

如何克服这个问题，因为我希望该列仅在冻结列上而不在未冻结列上。

我的代码：

<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表格中指导我。