0

I have folowing table:

<ng-container *ngFor='let data1 of sectionList'>
        <tr>
            <td>
                {{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>
                {{data2.SomeNumericValue}}
            </td>
        </tr>
        <tr><td>Here I need to summing of the data2.SomeNumericValue</td></tr>
    </ng-container>

In this table I'm using @pipe for grouping data. Pipe looks like:

@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));
    }
}

This works fine.

I need get summation of data2.SomeNumericValue that's rendering within *ngFor with pipe. But summation must be rendered outside *ngFor. Above in the example I wrote where it should be. Real table contains many columns and rows. And rows can be added dynamically. By some columns i want get summation. I know how to write function and render result in cell. But I think that summation must calculated inside *ngFor because it is reduce count of iterations. But maybe i'm wrong. How to do this and which method is the best?

user6408649
  • 1,227
  • 3
  • 16
  • 40
  • If you need to use the data outside of the view, maybe using a pipe isn't the right solution. Maybe you could create a function that can transform that data for you, before inserting it into the view, and then use that same function elsewhere when calculating the sum of the values. – Adam Feb 15 '17 at 23:16
  • Later, I refactored it. But now I want to leave as it is. Another way of how to re-go through the array using the @Pipe or function doesn't come to mind... – user6408649 Feb 15 '17 at 23:28
  • Just to complement the comment of @Adam, if you go through pipe solution.. just remember that the pipe must be `impure`, since you said `rows can be added dynamically`. – developer033 Feb 15 '17 at 23:31
  • Why @pipe is impure? I use it for grouping. – user6408649 Feb 15 '17 at 23:37
  • @Seva, Check [**this answer**](http://stackoverflow.com/questions/34456430/ngfor-doesnt-update-data-with-pipe-in-angular2#answer-34497504)... – developer033 Feb 15 '17 at 23:48

0 Answers0