angular - 複雑なテーブルの値の合計を計算する最良の方法は何ですか?

Question

私は次の表を持っています：

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

このテーブルでは、データのグループ化に @pipe を使用しています。パイプは次のようになります。

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

これはうまくいきます。

data2.SomeNumericValueパイプを使用して *ngFor 内でレンダリングされているものの合計を取得する必要があります。ただし、合計は *ngFor の外でレンダリングする必要があります。上記の例では、あるべき場所を書きました。実際のテーブルには、多くの列と行が含まれています。また、行を動的に追加できます。いくつかの列で、合計を取得したい。関数を記述して結果をセルにレンダリングする方法を知っています。ただし、反復回数を減らすため、* ngFor内で合計を計算する必要があると思います。しかし、多分私は間違っています。これを行う方法と、どの方法が最適ですか?