CODEWITHSUNDEEP
angulartypescriptfilteringgrouping
user6408649
user6408649

Reputation: 1305

Filtering data in @Pipe error

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

Upvotes: 1

Views: 617

Answers (2)

Christopher Moore
Christopher Moore

Reputation: 3099

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

Upvotes: 0

AngularChef
AngularChef

Reputation: 14087

Try adding parentheses around the property + filter ?

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

Upvotes: 0

Related Questions