How to get a sum of an array column field in an angular array 9.1.9?

Question

I amI am using Angular 9.1.9 and Html. I want to sum or total a nested array field and show in row.

I have a array list ('adherant') with multiple fields . I want to sum of an array columns field {{ Montant total }} and show in a text total like the photo.using Angular 9 and Html. I want to sum of an array columns field {{ Montant total }} and show in a text total like the photo. if there is a pipe methode , or filter !

files

interface adher {
  four?: string;
  mont: number;
  nombr: number;
  monmois: number;
  }

const adherant: adher[] = [
  {
    four: 'Russia',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  },
  {
    four: 'Russasia',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  },{
    four: 'ssss',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  },{
    four: 'Russddddia',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  },{
    four: 'sdsd',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  },{
    four: 'Russcxcxcxia',
    mont: 444,
    nombr: 17075200,
    monmois: 146989754
  }
];

<table class="table table-striped">

                        <thead>

                            <tr>
                                <th scope="col">Fournisseur</th>
                                <th scope="col">Montant totale</th>
                                <th scope="col">Nombre de mois</th>
                                <th scope="col">Montant par mois</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let adh of adherant |filter:search">
                                <th scope="row">{{ adh.four }}</th>
                                <td>
                                    {{ adh.mont }}
                                </td>
                                <td>{{ adh.nombr | number}}</td>
                                <td>{{ adh.monmois | number }}</td>
                            </tr>
                        </tbody>
                    </table>

You can send data from your filter pipe to generic service and get total from generic service — Cagri Tacyildiz
– Cagri Tacyildiz, Commented May 29, 2020 at 18:34

Aakash Garg · Accepted Answer · 2020-05-29 19:35:38Z

2

In component declare :-

public total;

this.total= this.adherant.reduce((prev,next)=>prev+next.mont,0);

Use it like {{total}} in template

edited May 29, 2020 at 19:35

answered May 29, 2020 at 18:55

Aakash Garg

11k2 gold badges11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aakash Garg Over a year ago

Try console logging total

Aakash Garg Over a year ago

And i forgot to add this with adherant. Do that too

Collectives™ on Stack Overflow

How to get a sum of an array column field in an angular array 9.1.9?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related