角primeng动态列

Posted 2023-02-21

【中文标题】角primeng动态列

【英文标题】：angular primeng dynamic columns

【发布时间】：2018-06-27 06:57:46

【问题描述】：

我在使用 primeNg 获取动态列的数据时遇到问题。我有以下 JSON 结构：

我的 Component.ts 看起来像这样：

this.claimOverviewService.getCarClaimOverview(this.domain).then(claimOverview => 
  this.carClaimOverview = claimOverview;
  //console.log(this.carClaimOverview);
);

this.cols = [
  field: 'id', header: 'VorgangsId', type: 'string',
  field: 'repairCosts', header: 'Reparaturkosten', type: 'number',
  field: 'status.name', header: 'Status', type: 'status',
  field: 'creationDate', header: 'Eingang', type: 'date'
];

我的 Componjent.html 看起来像这样：

<p-table [columns]="cols" [value]="carClaimOverview" [paginator]="true" [rows]="10">
<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>
</ng-template>
<ng-template pTemplate="body" let-claim let-columns="columns">
  <tr>
    <td *ngFor="let col of columns">
      <span *ngIf="col.type !== 'date'">
        claim[col.field]
      </span>
      <span *ngIf="col.type === 'date'">
        claim[col.field] | date:'fullDate'
      </span>
    </td>
  </tr>
</ng-template>

我的数据表如下所示： 如您所见，未显示列状态。我的 cols 数组有一个字段“status.name”，但名称没有出现。如果我将状态放入字段中，我会在我的数据表中得到 [object Object]。

所以该字段没有检测到我的 json 的子对象。是否有可能显示我的子对象或让字段知道下面有对象？

【问题讨论】：

您可以尝试将status[name] 作为列字段。

不起作用。

尝试做 status[0].name

另外，你能不能输出一个console.log(this.carClaimOverview[0].status) 和console.log(this.carClaimOverview[0].status.name。我猜你得到一个状态字段中的对象数组。我可能是错的。

不错！这工作得很好:) 谢谢 Sanoj_V。也许你给这篇文章一个答案，这样我就可以把它标记为正确的答案。

【参考方案1】：

只需将字段更改为claim[col.field]?.name。

从

替换对象的cols

 field: 'status.name', header: 'Status', type: 'status',

到这里

 `field: 'status', header: 'Status', type: 'status',`

【讨论】：

你能解释一下claim[col.field]?.name

@AbduManaz 显然对象没有绑定在 html dom 中，您需要指定静态或动态键。在这种情况下claim[col.field] 即claim[status] 包含一个对象，并且始终显示[object Object]。在这里，您需要像我一样指定密钥。

好的。我明白这一点，但我不明白的是? 符号和方括号外.name 的使用。任何解释都非常感谢。

@AbduManaz 这将检查status 对象是否有键name。 ? 仅在您的数据异步时处理 html 页面中的错误。