Angular Typescript - Map.get 返回未定义，尽管地图包含 7 个值

Question

Map.get always returns undefined when using number from form element (extra1):

  extraById = new Map<number,Extra>();
  @Input() extra1: number = -1;

  formChanged(carConfigurationFormChanged : any) {
    const index = this.extra1;
    const record : Extra | undefined = this.extraById.get(index);
    this.gesamtpreis = "" + record?.preis?.toString() + " " + Math.random().toString();//909 0.784784
  }

I will provide an answer to this question myself. The template:

<div class="card my-5">
  <div class="card-body">
    <form #carConfigurationForm="ngForm"  (change)="formChanged(carConfigurationForm)">
      <div class="form-group">
        <label for="extra">Extra 1&nbsp;</label>
        <select name="extra1" class="btn btn-secondary dropdown-toggle" [(ngModel)]="extra1">
          <option value="default">Kein Extra</option>
          <option *ngFor="let extra of selectExtra" [value]="extra.id">{{extra.name}} {{extra.preis}}&euro;</option>
        </select>
      </div>
        <div class="form-group">
          <label for="gesamtpreis">Gesamt&nbsp;</label>
          <span name="gesamtpreis" [innerHTML]="gesamtpreis" ngModel="gesamtpreis"></span>
        </div>
    </form>
  </div>
</div>

Answer 1

One solution is to use Math.trunc on the value from the form:

import { Component, OnInit, OnChanges, Input } from '@angular/core';
import { Extra } from '../model/extra';
import { ExtraService} from '../service/extra.service';

@Component({
  selector: 'app-car-configuration-form',
  templateUrl: './car-configuration-form.component.html',
  styleUrls: ['./car-configuration-form.component.sass']
})
export class CarConfigurationFormComponent implements OnInit{

  selectExtra : Extra[] = [];

  gesamtpreis : string = 'kein Preis';

  extraById = new Map<number,Extra>();

  constructor(private extraService: ExtraService) { }

  getSelectedExtra(): void{
    this.extraService.findAll()
      .subscribe(selectExtra => {
        this.selectExtra= selectExtra;
        this.selectExtra.forEach( (record : Extra)  => { this.extraById.set(record.id, record); });
        }
     );
  }

  ngOnInit() {
    this.getSelectedExtra();
  }
  @Input() extra1: number = -1;

  formChanged(carConfigurationFormChanged : any) {
    const index = Math.trunc(this.extra1);//important, otherwise the Map.get returns undefined
    const record : Extra | undefined = this.extraById.get(index);
    this.gesamtpreis = "" + record?.preis?.toString() + " " + Math.random().toString();//909 0.784784
  }
}