sum many user select of array to show the total (angular)

Question

In my project, in summary.component.ts I've two array one dependent on the other:

state: State[]
city: City[]
selection: number[] = number

where class state.ts :

id: number
name: string

and class city.ts

id: number
name: string
score: number
state: State

In DB i have this situation:

STATE
--------------
id | name     |
--------------
 1 | USA      |
--------------
 2 | UK       |
--------------
 3 | Italy    |
--------------

CITY
-----------------------------------
id | name       | score | state_id |
-----------------------------------
1  | New York   | 8     | 1        |
-----------------------------------
2  | Boston     | 6     | 1        |
-----------------------------------
3  | Miami      | 4     | 1        |
-----------------------------------
4  | London     | 9     | 2        |
-----------------------------------
5  | Manchester | 8     | 2        |
-----------------------------------
6  | Liverpool  | 9     | 2        |
-----------------------------------
7  | Rome       | 11    | 3        |
-----------------------------------
8  | Florence   | 10    | 3        |
-----------------------------------
9  | Turin      | 7     | 3        |
-----------------------------------

In the HTML page ( summary.component.html ) I divided the select with the slice :

 <div name="state"> <div *ngFor="let st of state | slice:0:1;"> {{ st.state }} </div> </div> <select [(ngModel)]="selection[0]" name="city0" id="id0"> <option [ngValue]="cityname.id" *ngFor="let ci of city | slice:0:3; index as i"> {{ ci.name }} <p>|</p> {{ ci.score }} </option> </select> <div name="state"> <div *ngFor="let st of state | slice:1:2;"> {{ st.state }} </div> </div> <select [(ngModel)]="selection[1]" name="city1" id="id1"> <option [ngValue]="cityname.id" *ngFor="let ci of city | slice:3:6; index as i"> {{ ci.name }} <p>|</p> {{ ci.score }} </option> </select> <div name="state"> <div *ngFor="let st of state | slice:2:3;"> {{ st.state }} </div> </div> <select [(ngModel)]="selection[2]" name="city2" id="id2"> <option [ngValue]="cityname.id" *ngFor="let ci of city | slice:6:9; index as i"> {{ ci.name }} <p>|</p> {{ ci.score }} </option> </select>

How can I manage the sum of the scores chosen by the user based on the selections that are made in the array? i was thinking about an outputTotal method.

Answer 1

First of all using slice pipe the way you did is a bad design (imagine what happens if your data source changes and you have to go and update all slice indexes). You can easily get rid of slice by using nested *ngFor and *ngIf like:

 <div name="state" *ngFor="let st of state"> <div> {{ st.state }} </div> <select [(ngModel)]="selection"> <ng-container *ngFor="let ci of city; index as i"> <option *ngIf="ci.state_id === st.id" [ngValue]="cityname.id"> {{ ci.name }} <p>|</p> {{ ci.score }} </option> </ng-container> </select> </div>

By doing this you will have a single array of selections so you can calculate total output as:

const totalOutput = city.filter(c => selection.includes(c.id)).reduce((a,c) => a + c.score, 0);