Home How to fix Argument of type 'string' is not assignable to parameter of type 'number'?

Questions

How to fix Argument of type 'string' is not assignable to parameter of type 'number'?

May 19, 2022

I want to save in my database values which have different types, being new to Angular I don’t know how to do it, my name value fits well in my database while the value of nb_engins is always null no matter what. I am trying to assign them to an array, is this the correct solution ?
yet it works in my back

Visualisation.component.html

<div class="textbox">
        <input #flotteName placeholder="Name">
        
    </div>
    <div class="textbox">
    <input #flotteNbengins placeholder="nb_engins" type="number">
  </div>

    <input type="button"
           class="btn" 
           value="Add flotte" 
           (click)="add(
                      flotteName.value,
                      flotteNbengins.value                     
                    );
                    flotteName.value='';
                    flotteNbengins.value=''
                    ">
  </div>

Visualisation.component.ts

export class VisualisationComponent  implements OnInit {

  
  message: any;
  error: any;
  flottes: Array<Flotte> = [];


constructor(
  private api: ApiService,
  private flotteservice: FlotteService,
    private http: HttpClient,) {}


add(name: string, nb_engins: number ){

  name = name.trim();
  if (!name) { return; }

  if (!nb_engins) { return; }
 
  this.api.registerFlotte({ name, nb_engins} as Flotte)
    .subscribe(data => {
      this.flottes.push(data);
    });
}

api.service.ts

 registerFlotte(flotte: Flotte): Observable<Flotte>
 {
   

   return this.http.post<Flotte>(this.base_url, flotte,  { headers: this.httpHeaders });
 }

interface flotte.ts

export interface Flotte {
    id: number;
    name: string;
    nb_engins: number;
}

Thanks in advance

>Solution :

The issue is that add(name: string, nb_engins: number ) expects the second argument which is nb_engins as number
but flotteNbengins.value is a string so it won’t allow to assign to fix this you can either change the parameter of the function to string or

<input
  type="button"
  class="btn"
  value="Add flotte"
  (click)="
    add(flotteName.value, flotteNbengins.valueAsNumber);
    flotteName.value='';
    flotteNbengins.value=''
  "
/>

here is a working demo
https://stackblitz.com/edit/angular-strict-mode-hkzrvb?file=src%2Fapp%2Fcomponents%2Fapp.component.ts,src%2Fapp%2Fcomponents%2Fapp.component.html