1

我正在尝试对 PrimeNG turbotable 使用全局“搜索”过滤器框，如在他们的示例中，除了将全局搜索字段放在表格之外（它们在表格内部位于 a 中caption，但我的设计要求在桌子。

它应该可以工作，但我在编译时不断收到错误

Property 'filterGlobal' does not exist on type 'DataTable'.

并且该应用程序将无法运行。我在他们的例子中看不到任何关于filterGlobal. 在这一点上，我被难住了。感觉有些东西需要在某处声明或导入，但我不知道。

我的表格html：

<div class="toolbar">
    <form class="form-inline">
        <input type="text"
               placeholder="Search"
               (input)="dt.filterGlobal($event.target.value, 'contains')">
    </form>
</div>
<span *ngIf="people$ | async as people">
  <p-table #dt 
        [value]="people"
        [paginator]="true"
        [rows]="10" 
        [totalRecords]="people?.length"
        [rowsPerPageOptions]="[10,20,30,50]" 
        [globalFilterFields]="['first_name', 'last_name', 'email', 'age', 'country']"
        >
  <ng-template pTemplate="header">
    <tr>
      <th *ngFor="let col of cols">{{col.header}}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body"
              let-rowData
              let-columns="cols">
    <tr>
      <td *ngFor="let col of cols">{{rowData[col.field]}}</td>
    </tr>
  </ng-template>
</p-table>
</span>

在我的打字稿中：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MockDataService } from '../../shared/services/mock-data.service';
import { DataTable } from 'primeng/primeng';

@Component({
  selector: 'app-turbotable-deluxe',
  templateUrl: './turbotable-deluxe.component.html',
  styles: []
})
export class TurbotableDeluxeComponent implements OnInit {
  @ViewChild('dt')
  dt: DataTable;

  people$;
  cols;

  constructor(private mockdata: MockDataService) {}

  ngOnInit() {
    this.people$ = this.mockdata.get('people_100.json');

    this.cols = [
      { field: 'first_name', header: 'First Name' },
      { field: 'last_name', header: 'Last Name' },
      { field: 'age', header: 'Age' },
      { field: 'email', header: 'Email' },
      { field: 'country', header: 'Country' }
    ];
  }
4

1 回答 1

0

p-table 的正确类是“Table”。我在 primeNg 的源代码中找到了它。

于 2018-09-07T14:20:53.950 回答