Filtering data in @Pipe error

1
votes

I'm attempt filtering data and rendering it in htmltable. Below my code: 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;
......

HTML where data must rendering

    <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>

sectionList it is Array of objects like myObj{number:id, string:name} I'm getting id from this array and trying to filter data that received from server. As i understand for this in angular can be using @Pipe. I know that there are other approaches, but this one I liked more. But I getting 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

2
angulartypescriptfilteringgrouping
what is the + doing in the pipe? - Christopher Moore
@Christopher. it's casting the value to a number (i'm assuming) - AngularChef
ok - you're declaring data in both of your nested for loops, that probably isn't helping - Christopher Moore
A tip for debugging. You have a lot of different errors in your code. Get a version working with minimal features, then slowly work your way to the end state, adding one feature at a time and verify that each one works before moving to the next. - Christopher Moore

2 Answers

0
votes

Try adding parentheses around the property + filter ?

<tr *ngFor="let data of (model.Register10Data | filter:'sectionGroup':'cSectionId'); let dataIndex = index">
</tr>
0
votes

Try this

 <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>

You can access the values from the first ngFor in the second one, but only if you declare differnt names data1 and data2 here.

If you haven't done so already, include your custom pipe in app.module.ts

...
import { FilterPipe } from './filter.pipe';

@NgModule({
  imports: [
    ...,
  ],
  declarations: [
    ...,
    FilterPipe
  ],
})
export class MyModule { }