Режимы сопоставления таблицы Angular PrimeNG Table Match

Опубликовано: 21 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы собираемся изучить режимы Angular PrimeNG Table Match.

Режимы соответствия используются для фильтрации данных на основе их типов данных. Фильтр Angular PrimeNG предоставляет разные режимы сопоставления для разных типов данных. Например, текстовый тип отображает совпадения строк, а startWith соответствует совпадениям начальной строки.

Параметры режима текстового соответствия:

  • Режим соответствия фильтра.STARTS_WITH
  • FilterMatchMode.CONTAINS
  • FilterMatchMode.NOT_CONTAINS
  • Режим соответствия фильтра.ENDS_WITH
  • FilterMatchMode.EQUALS
  • FilterMatchMode.NOT_EQUALS

Параметры режима числового совпадения:

  • FilterMatchMode.EQUALS
  • FilterMatchMode.NOT_EQUALS
  • Режим соответствия фильтра.LESS_THAN
  • FilterMatchMode.LESS_THAN_OR_EQUAL_TO
  • Режим соответствия фильтра.GREATER_THAN
  • FilterMatchMode.GREATER_THAN_OR_EQUAL_TO

Параметры режима совпадения дат:

  • FilterMatchMode.DATE_IS,
  • FilterMatchMode.DATE_IS_NOT
  • FilterMatchMode.DATE_BEFORE
  • FilterMatchMode.DATE_AFTER

Синтаксис:

Используйте режимы соответствия следующим образом:

this.matchModeOptions = [
      { 
          label: "Starts With", 
          value: FilterMatchMode.STARTS_WITH 
      },
      { 
          label: "Contains", 
          value: FilterMatchMode.CONTAINS 
      },
      { 
          label: "Ends With", 
          value: FilterMatchMode.ENDS_WITH 
      },
      {     
          label: "Equals", 
          value: FilterMatchMode.*
      },
];

И применять его следующим образом:

<p-columnFilter
      type="text"
      [field]="col.field"
      [matchModeOptions]="matchModeOptions"
>
</p-columnFilter>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new geeks_angular

Шаг 2: После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.

cd geeks_angular

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Структура проекта будет выглядеть следующим образом:

Пример 1. В этом примере мы создаем таблицу и добавляем параметры фильтра.

app.component.html

HTML




<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
  
<h3>Angular PrimeNG Table Match modes</h3>
  
<p-table #dt [columns]="cols" [value]="tutorials" 
    [paginator]="true" [rows]="10" 
    responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns">
                <p-columnFilter type="text" 
                    [field]="col.field" 
                    [matchModeOptions]="matchModeOptions">
                </p-columnFilter>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" 
        let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-table>

app.component.ts
Javascript



import { Component } from "@angular/core";
import { SelectItem, FilterService, 
    FilterMatchMode } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
  
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];
    constructor(private filterService: FilterService) { }
  
    ngOnInit() {
        this.tutorials = [
            {
                title: "Queue",
                category: "Data Structure",
                rating: 8,
            },
            {
                title: "Circularly LinkedList",
                category: "Data Structure",
                rating: 1,
            },
            {
                title: "Doubly LinkedList",
                category: "Data Structure",
                rating: 3,
            },
            {
                title: "Singly LinkedList",
                category: "Data Structure",
                rating: 5,
            },
            {
                title: "Doubly Ended Queue",
                category: "Data Structure",
                rating: 10,
            },
            {
                title: "Binary Search Tree",
                category: "Data Structure",
                rating: 2,
            },
            {
                title: "Red Black Tree",
                category: "Data Structure",
                rating: 9,
            },
            {
                title: "Breadth First Search",
                category: "Graph",
                rating: 6,
            },
            {
                title: "Floyd"s Cycle",
                category: "Algorithm",
                rating: 7,
            },
            {
                title: "Travelling Salesman Problem",
                category: "Algorithm",
                rating: 4,
            },
            {
                title: "Bellman Ford",
                category: "Graph",
                rating: 8,
            },
            {
                title: "KMP Algorithm",
                category: "String",
                rating: 10,
            },
        ];
  
        this.cols = [
            { field: "title", header: "Title" },
            { field: "category", header: "Category" },
            { field: "rating", header: "Rating" },
        ];
  
        this.matchModeOptions = [
            { 
                label: "Starts With", 
                value: FilterMatchMode.STARTS_WITH 
            },
            { 
                label: "Contains", 
                value: FilterMatchMode.CONTAINS 
            },
            { 
                label: "Ends With", 
                value: FilterMatchMode.ENDS_WITH 
            },
            { 
                label: "Equals", 
                value: FilterMatchMode.EQUALS 
            },
        ];
    }
}
  
export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}
app.module.ts
Javascript



import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from 
    "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ToastModule } from "primeng/toast";
import { ButtonModule } from "primeng/button";
import { TableModule } from "primeng/table";
import { AutoCompleteModule } from "primeng/autocomplete";
import { InputTextModule } from "primeng/inputtext";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        AutoCompleteModule,
        FormsModule,
        TableModule,
        InputTextModule,
        HttpClientModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }
Выход:
Пример 2: В следующем примере мы будем использовать режимы сопоставления числовых значений в столбце Рейтинг.
app.component.html
HTML



<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
  
<h3>Angular PrimeNG Table Match modes</h3>
  
<p-table #dt [columns]="cols" [value]="tutorials" 
    [paginator]="true" [rows]="10" 
    responsiveLayout="scroll">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{ col.header }}
            </th>
        </tr>
        <tr>
            <th *ngFor="let col of columns">
                <p-columnFilter type="text" 
                    [field]="col.field" 
                    [matchModeOptions]="matchModeOptions">
                </p-columnFilter>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" 
        let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{ rowData[col.field] }}
            </td>
        </tr>
    </ng-template>
</p-table>
app.component.ts
Javascript



import { Component } from "@angular/core";
import { SelectItem, FilterService, FilterMatchMode } 
    from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
export class AppComponent {
    cols: any[];
    tutorials: Tutorial[];
    matchModeOptions: SelectItem[];
    constructor(private filterService: FilterService) { }
  
    ngOnInit() {
        this.tutorials = [
            {
                title: "Queue",
                category: "Data Structure",
                rating: 8,
            },
            {
                title: "Circularly LinkedList",
                category: "Data Structure",
                rating: 1,
            },
            {
                title: "Doubly LinkedList",
                category: "Data Structure",
                rating: 3,
            },
            {
                title: "Singly LinkedList",
                category: "Data Structure",
                rating: 5,
            },
            {
                title: "Doubly Ended Queue",
                category: "Data Structure",
                rating: 10,
            },
            {

                    
                                            Technical Scripter
                                            Picked
                                            AngularJS
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ

                

                                            

                            
Количество чисел между L и R, взаимно простых с P

                            
27 Февраля, 2023

                        

                                            

                            
Количество чисел между L и R, взаимно простых с P

                            
27 Февраля, 2023

                        

                                            

                            
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

                            
27 Февраля, 2023

                        

                                            

                            
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

                            
27 Февраля, 2023

                        

                                            

                            
Найдите все факторы заданного числа и их побитовое XOR

                            
27 Февраля, 2023

                        

                                            

                            
Показать самое длинное имя

                            
27 Февраля, 2023

                        

                                            

                            
Форматирование лицензионного ключа

                            
27 Февраля, 2023

                        

                                            

                            
Максимизируйте сумму трех чисел, выполнив побитовое XOR

                            
27 Февраля, 2023