Angular PrimeNG表的过滤

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。这篇文章将向我们展示如何在Angular PrimeNG中使用表过滤功能。

Angular PrimeNG表过滤功能在表组件中启用了过滤选项。因此，使用过滤选项，我们可以根据我们的需要轻松地搜索和过滤出所需的数据。

语法:

<p-table #tableref>
<ng-template pTemplate="caption">
      <input
        type="text"
        pInputText
        (input)="tableref.filterGlobal(
        $event.target.value, 'contains')" />
 </ng-template>
</p-table>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Angular PrimeNG表的过滤

例子1：下面是一个简单的例子，演示了Angular PrimeNG表过滤的使用，我们使用的是单列过滤。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Filtering</h4>
  
<p-table #myTab [value]="tableData" 
                [scrollable]="true" 
                scrollHeight="400px">
    <ng-template pTemplate="header">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <th *ngFor="let col of cols">
                <input pInputText type="text" (input)=
"myTab.filter($event.target.value, col.field, col.filterMatchMode)" />
            </th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.lastname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from "@angular/core";
  
interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  tableData: People[] = [];
  cols: any[] = [];
  constructor() {}
  
  ngOnInit() {
    this.cols = [
      { field: "firstname", header: "First Name" },
      { field: "lastname", header: "Last Name" },
      { field: "age", header: "Age" },
    ];
    this.tableData = [
      {
        firstname: "David",
        lastname: "ace",
        age: "40",
      },
      {
        firstname: "AJne",
        lastname: "west",
        age: "40",
      },
      {
        firstname: "Mak",
        lastname: "Lame",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

输出:

Angular PrimeNG表的过滤

例子2：下面是另一个例子，演示Angular PrimeNG表过滤的使用。在这个例子中，我们使用的是全局过滤。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Table Filtering</h4>
  
<p-table #myTab [value]="tableData" 
                [scrollable]="true" 
                scrollHeight="400px" 
                [globalFilterFields]=
         "['firstname', 'lastname', 'age']">
    <ng-template pTemplate="caption">
        <div style="text-align: right">
            <i class="pi pi-search" 
               style="margin:4px 4px 0 0"> </i>
            <input type="text" 
                   pInputText size="50" 
                   placeholder="Global Filter"
                   (input)=
"myTab.filterGlobal($event.target.value, 'contains')" 
                    style="width:auto" />
        </div>
    </ng-template>
    <ng-template pTemplate="header">
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Age</th>
        </tr>
    </ng-template>
  
    <ng-template pTemplate="body" let-people>
        <tr>
            <td>
                {{ people.firstname }}
            </td>
            <td>
                {{ people.lastname }}
            </td>
            <td>
                {{ people.age }}
            </td>
        </tr>
    </ng-template>
</p-table>

import { Component } from "@angular/core";
  
interface People {
  firstname?: string;
  lastname?: string;
  age?: string;
}
  
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  tableData: People[] = [];
  cols: any[] = [];
  constructor() {}
  
  ngOnInit() {
    this.cols = [
      { field: "firstname", header: "First Name" },
      { field: "lastname", header: "Last Name" },
      { field: "age", header: "Age" },
    ];
    this.tableData = [
      {
        firstname: "David",
        lastname: "ace",
        age: "40",
      },
      {
        firstname: "AJne",
        lastname: "west",
        age: "40",
      },
      {
        firstname: "Mak",
        lastname: "Lame",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
      {
        firstname: "Peter",
        lastname: "raw",
        age: "40",
      },
      {
        firstname: "Kane",
        lastname: "James",
        age: "40",
      },
    ];
  }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { RouterModule } from "@angular/router";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TableModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot
        ([{ path: "", component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}