无法使用 Primeng Turbo Table 过滤 Angular 7 中的嵌套对象答案

【问题标题】：Unable to filter the nested object in Angular 7 using Primeng Turbo Table无法使用 Primeng Turbo Table 过滤 Angular 7 中的嵌套对象
【发布时间】：2019-10-31 15:18:49
【问题描述】：

我试图将以 json 格式从 web api 返回的嵌套对象显示到 turbo 表中，即 p-table，一个 Primeng 组件。成功显示所有数据后，我尝试使用列过滤器，在其中我设法过滤掉父对象，但现在努力过滤数组中的子对象或嵌套对象。

以下是我到目前为止所做的。

SubscriptionlistComponent.ts

loadAllSubscriptions(): any {
this.spinner.show();

this.subscriptionService.getAllSubscriptions().subscribe(data => {
  //subscription.lstSubscription = data;
  this.subscriptionLst = data;
  //console.log(this.subscriptionLst);
  //this.lstsubscriptions = this.filter.valueChanges.pipe(
  //  startWith(''),
  //  map(text => this.search(text, this.pipe, this.datepipe))
  //);

  this.totalSubscriptions = data.length;
  this.spinner.hide();
});

FilterUtils['custom'] = (value, filter): boolean => {
  if (filter === undefined || filter === null || filter.trim() === '') {
    return true;
  }

  if (value === undefined || value === null) {
    return false;
  }

  return parseInt(filter) > value;
}

this.cols = [
  { field: 'DateTime', header: 'Date' },
  { field: 'Driver', subfield: 'FirstName', header: 'Driver' },
  { field: 'paymentMode', subfield : 'Title', header: 'Mode' },
  { field: 'startDate', header: 'Start Date' },
  { field: 'endDate', header: 'End Date' },
  { field: 'Amount', header: 'Amount' }
];
}

这是我的 component.html 代码

<div class="content-section implementation ui-fluid">
  <p-table #dt [columns]="cols" [value]="subscriptionLst" 
  [paginator]="true" [rows]="10">
    <ng-template pTemplate="caption">
     <div style="text-align: right">
     <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input type="text" pInputText size="50" placeholder="Global Filter" (input)="dt.filterGlobal($event.target.value, 'contains')" style="width:auto">
  </div>
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      {{col.header}}
    </th>
  </tr>
  <tr>
    <th *ngFor="let col of columns" [ngSwitch]="col.field">
      <input *ngSwitchCase="'DateTime'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <div *ngSwitchCase="'Driver'" [ngSwitch]="col.subfield">
        <input *ngSwitchCase="'FirstName'" pInputText type="text" (input)="dt.filter($event.target.value, col.subfield, 'contains')">
      </div>
      <div *ngSwitchCase="'paymentMode'" [ngSwitch]="col.subfield">
        <input *ngSwitchCase="'Title'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      </div>
      <input *ngSwitchCase="'startDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <input *ngSwitchCase="'endDate'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
      <input *ngSwitchCase="'Amount'" pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
    </th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
  <tr [pSelectableRow]="rowData">
    <td *ngFor="let col of columns">
      <div *ngIf="col.subfield;then nested_object_content else normal_content"></div>
        <ng-template #nested_object_content>
          {{rowData[col.field][col.subfield]}}
        </ng-template>
        <ng-template #normal_content>
          {{rowData[col.field]}}
        </ng-template>
    </td>
  </tr>
</ng-template>
 </p-table>
</div>

【问题讨论】：

标签： filter angular7 primeng tablesort

【解决方案1】：

我自己解决了问题。希望这将帮助其他将解决这种情况的人。

我所要做的就是将 col.subfield 替换为实际对象和嵌套对象名称。

替换

dt.filter($event.target.value, col.subfield, 'contains')

与

dt.filter($event.target.value, 'Driver.FirstName', 'contains')

开关盒

<div [ngSwitch]="col.subfield">
  <input *ngSwitchCase="'FirstName'" pInputText type="text" (input)="dt.filter($event.target.value, 'Driver.FirstName', 'contains')">
</div>

就是这样……

【讨论】：