具有单独搜索字段的PrimeNG Angular 6可投掷错误

Question

我正在尝试使用全局“搜索”过滤器框来表示PrimeNG可涡轮增压器，就像在their example中一样，除了将全局搜索字段放在表格之外（它们在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' }
    ];
  }

Answer 1

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