Issue
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.
Solution
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);