I am currently working on filtering data and displaying it in an HTML table. Below is the code I have written: In module.ts
import Register10Pipe = require("./register10/register10.pipe");
@NgModule({
declarations: [
Register10Pipe.FilterPipe
])
In my.pipe.ts
import { Component, OnInit, Pipe, PipeTransform, Injectable } from '@angular/core';
@Pipe({
name: 'sectionGroup'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], field: number, value: number): any[] {
if (!items) return [];
return items.filter(it => (+it[field]) === (+value));
}
}
In my.component.ts
import { FilterPipe } from './register10.pipe';
export class MyComponent implements OnInit {
filter: FilterPipe;
......
This is the HTML where the data should be rendered
<ng-container *ngFor='let data1 of sectionList'>
<tr>
<td colspan="7">
{{data1.name}}
<button (click)="ArrRow($event)" style="float: right" id="{{data1.id}}">+</button>
</td>
</tr>
<tr *ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index">
<td>
{{dataIndex}}
</td>
</tr>
</ng-container>
The sectionList contains an array of objects like myObj{number:id, string:name}. I am extracting the ID from this array and attempting to filter the data retrieved from the server. I believe using @Pipe in Angular for this purpose would be appropriate. Although there are other methods available, I prefer this approach. However, I encountered an exception.
Unhandled Promise rejection: Template parse errors: The pipe 'filter' could not be found (" ]*ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index">"): e@68:20 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors: The pipe 'filter' could not be found (" ]*ngFor="let data2 of (model.Register10Data | filter:'sectionGroup':data1.id); let dataIndex = index">"): e@68:20