PrimeNG Angular 6 Turbotable с ошибкой в ​​отдельном поле поиска - PullRequest
Новая
       5

PrimeNG Angular 6 Turbotable с ошибкой в ​​отдельном поле поиска

0 голосов
/ 06 сентября 2018

Я пытаюсь использовать глобальное поле «поиска» для турбостабильного сервера PrimeNG, как в их примере , за исключением размещения поля глобального поиска вне таблицы (они находятся внутри таблицы в 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' }
    ];
  }

1 Ответ

0 голосов
/ 07 сентября 2018

Правильный класс для p-таблицы - «Таблица». Я нашел это в исходном коде primeNg.

...