Value does not get updated Angular 7 TS

Question

UPDATE: My code does not seem to be updating the selected value with the new value (the value that is written in the input field "newVb"). It sais that 'this.newVarde' is undefined when it comes to the line 'this.selectedVarde = this.newVarde'. And in the end it adds a new value rather than update the selected one. But why, I don't get...

.ts

export class RightMenuComponent implements OnInit {

  public selectedVarde: this.selectedVarde;
  public newVarde: Varde;



  constructor(private _vardeService: VardeService) {
  }

updateVarde() {


    var beskrivning = this.selectedVarde;
    var newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;


   this.varde = {

     Beskrivning: newVarde,
   }


    this.selectedVarde = this.newVarde;
    this._vardeService.updateVarde(this.varde).subscribe(() => { console.log("Lyckat") });


  }

And then my .html:

<label for="updateVarde">T:Värdet som du vill uppdatera</label>
            <select [(ngModel)]="selectedVarde" id="selectedVarde" name="updateVarde" class="form-control" required >
              <option *ngFor="let varde of allaVarden" [ngValue]="varde">{{varde.beskrivning}}</option> 
            </select>
            <button type="button" class="btn btn-primary" (click)="updateVarde()" style="margin-left:4%;" data-toggle="modal" data-target="#vardeModal" data-dismiss="modal">T:Redigera valt värde</button>
            <label for="beskrivning">T:Nytt värde: </label>
            <input class="input" style="width:10%;" id="newVb" type="text">

Greatful for any tips on what is wrong with the code

Answer 1

its correct, its undefined because you didn't set the value for it.

These are your component defined properties/variables

public selectedVarde: Varde;
public newVarde: Varde;
public beskrivning: Varde;

You then defined and initialized new scoped variables with the same name here in the method.

var beskrivning = this.selectedVarde;
var newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: newVarde,
}

Hence you reach the following line this.newVarde is still undefined

this.beskrivning = this.newVarde;

Edit:

Instead of creating a new variable you can use the ones you have already defined.

this.beskrivning = this.selectedVarde;
this.newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: this.newVarde,
}

Edit 2:

Since so newVarde in your method updateVarde does not refer to the newVarde in your component then you have to declare and initialize it in the method.

this.beskrivning = this.selectedVarde;
const newVarde = (<HTMLInputElement>document.getElementById('newVb')).value;

this.varde = {
 Beskrivning: newVarde,
}