Невозможно отфильтровать вложенный объект в Angular 7, используя Primeng Turbo Table - PullRequest
Новая
       33

Невозможно отфильтровать вложенный объект в Angular 7, используя Primeng Turbo Table

0 голосов
/ 30 октября 2019

Я пытался отобразить вложенные объекты, возвращенные из web api в формате json, в турбо-таблицу, т.е. 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>

1 Ответ

0 голосов
/ 31 октября 2019

Я понял проблему самостоятельно. Надеюсь, это поможет другим, кто справится с этой ситуацией.

Все, что мне нужно было сделать, это заменить поле 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>

И это все ...

...