How to fix Argument of type 'string' is not assignable to parameter of type 'number&#-CodePudding

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 >
        <input #flotteName placeholder="Name">
        
    </div>
    <div >
    <input #flotteNbengins placeholder="nb_engins" type="number">
  </div>

    <input type="button"
            
           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

CodePudding user response：

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"
  
  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/app/components/app.component.ts,src/app/components/app.component.html