Angular 7 TypeScript code not updating value

Question

Angular 7 TypeScript code not updating value

UPDATE: I'm having trouble with my code not updating the selected value with the new one entered in the input field "newVb". The error message says 'this.newVarde' is undefined when it reaches the line 'this.selectedVarde = this.newVarde'. Instead of updating the selected value, it's adding a new one. I'm stuck on why this is happening...

.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">

Appreciative of any insights on what might be causing the issue in the code

angular typescript asp.net-core insert-update

Answer 1

Answer №1

You are correct, the value is undefined because it has not been set.

These are the properties/variables defined in your component:

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

In the method, you then declared and initialized new scoped variables with the same name as follows:

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

this.varde = {
 Beskrivning: newVarde,
}

This is why this.newVarde remains undefined at this point.

this.beskrivning = this.newVarde;

Edit:

Instead of creating a new variable, consider using the ones already defined:

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

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

Edit 2:

Since the newVarde in your method updateVarde does not refer to the newVarde in your component, you need to declare and initialize it within the method:

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

this.varde = {
 Beskrivning: newVarde,
}

Answer 2

You are correct, the value is undefined because it has not been set.

These are the properties/variables defined in your component:

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

In the method, you then declared and initialized new scoped variables with the same name as follows:

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

this.varde = {
 Beskrivning: newVarde,
}

This is why this.newVarde remains undefined at this point.

this.beskrivning = this.newVarde;

Edit:

Instead of creating a new variable, consider using the ones already defined:

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

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

Edit 2:

Since the newVarde in your method updateVarde does not refer to the newVarde in your component, you need to declare and initialize it within the method:

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

this.varde = {
 Beskrivning: newVarde,
}

Angular 7 TypeScript code not updating value

Answer №1

Similar questions

Display a loading indicator when loading a lazy loaded module in Angular 2

What is the process for running an Angular 1.4 application on a system with Angular 6 installed?

Recently updated from Angular 9 to 14 and noticed a peculiar issue in the deployed app - all API calls seem to only reference the root or hosted URL in the request URL

Guide on inputting Vue component in props

Leverage elements from nearby npm repository when building an Angular 2 application

Changing Observable to Promise in Angular 2

How to prevent the 'page' output event from triggering when scrolling in ngx-datatable?

Challenges encountered when passing objects with Angular 2 promises

Oops! There seems to be an issue with Angular - I'm getting an

The tooltip is being truncated

Whenever I attempt to run my application using ng serve on Linux, I encounter the error stating: "Module '@angular-devkit/build-angular/package.json' cannot be found."

How to modify the port for the inspector in ng serve configuration?

Guide on how to connect several Subjects within an object literal to their corresponding Observables in another object literal

The solution to resolving setState not updating within a react context

Using Typescript: invoking static functions within a constructor

Looking to retrieve the smallest amount of array sets in Angular4

Generate a configuration file that allows for the reading and storage of modifications

Changing return values with Jest mocks in TypeScript

Bring in properties from a separate file in Vue3

What is the best way to generate a random item when a button is clicked?