[Fixed] strange value of total sum of select in typescript

Issue

In my angular project I’ve to calculate the sum of the scoring selections. I don’t know why the totalScore gives me strange results. totalScore is the sum of city.score values.

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 summary.component.ts:

  state: State[]
  city: City[]
  selection: number[]
  msg1: boolean = false
  totalScore: number

  constructor(
    private service: ScoreSummaryService
  ) { }

  ngOnInit() {
    this.service.getState().subscribe(data => {
      this.state = data;
    })
    this.service.getCity().subscribe(data => {
      this.city = data;
    })
  }

  totalOutput() {
    const total = this.city.filter(c => this.selection.includes(c.id)).reduce((a,c) => a + c.score, 0)
    this.totalScore = total
    this.msg1 = true
  }

In summary.component.html:

<div name="selt" *ngFor="let array of state; index as j">
            <strong>• {{ array.state }}</strong>
            <select name="sel" [(ngModel)]="selection" style="margin-top: 10px;" class="form-control">
              <ng-container *ngFor="let array2 of city; index as i">
                <option *ngIf="array2.stateId.id === array.id" [value]="array2.id">
                  {{ array2.name }} <p>|</p>
                  {{ array2.score }}
                </option>            
              </ng-container>
            </select>
            <label></label>
          </div>
          
          <button type="submit" (click)="totalOutput()"
          class="btn btn-primary">Go</button>
          <hr>
          <div class="row" *ngIf="msg1">          
            <p>Score: <strong>{{totalScore}}</strong></p> 
          </div>

• state.ts

export class State {
    id: number
    name: string
}

• city.ts

import { State } from "./state"

export class City {
    id: number
    name: string
    score: number
    stateId: State
}

Solution

Though your requirement is unclear I’ve implemented a solution at StackBliz

See if this works for you.

Edit: (Check updated link)

Add these lines in your ngOnInit():

this.state.forEach(f =>
  this.selection.push(this.city.filter(c => c.stateId.id === f.id)[0].id)
);