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

Encountering npm3 installation errors with typyings in Angular 2?

Having trouble accessing a custom factory within a directive in Angular using TypeScript

How to efficiently retrieve parent content from a child component

Exploring the nuances of checking lists in TypeScript

Encountered an error while trying to start the server on port 9876: Permission denied (Error: EACCES) while running Angular Unit Tests using the command 'ng test'

Struggling to obtain the Variable

How to update a variable in the app.config.json file in Angular 5

What is the best way to interpret the property 'subscribe' of an undefined object?

Strategies for ensuring that code does not execute in Angular until the API response has been received

What is preventing me from consistently accessing the Type Definition while my cursor is on a JavaScript/TypeScript parameter name in VS Code, and what are some strategies I can use to overcome this issue?

The Nestje subscription is encountering a NULL value and displaying an error message stating: "Non-nullable field Subscription cannot be returned as null."

Deprecated: Ngx Progress Bar will no longer be supported due to changes in

Obtaining additional information for Observable<Object[]>

Is it possible to secure an API endpoint from unauthorized access by external authenticated users not originating from the requesting application?

Tips for customizing the appearance of a label when a MUI Radio Button is selected

What is the best way to adjust the height of a dropdown box in an angular application?

Using custom hooks in JSX triggers a TypeScript error when the returned component is accessed

Tips for connecting to a docker container containing an Angular application while the Angular app is also running in its own container

Changes in the styles of one component can impact the appearance of other

Angular2's $compile directive functions similarly to AngularJS 1's $compile directive