Having trouble with ion-input? Getting an undefined value while trying to bind prodbum.totalamt. Any ideas on what the problem could be?

Encountering an issue with ion-input. Getting an undefined value when attempting to bind prodbum.totalamt. What could be causing this problem?

username

    <ion-item>
      <ion-label floating>Secondname</ion-label>
      <ion-input type="number"  name="secondname" [(ngModel)]="prodbum.secondname" required></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>Total: {{prodbum.username * prodbum.secondname}}</ion-label>
      <ion-input type="number" [value]="prodbum.username * prodbum.secondname" [(ngModel)]= "prodbum.totalamt"  readonly="true"></ion-input>
    </ion-item>
    <ion-item>

Answer №1

To handle this scenario, you can utilize the change event and update the prodbum.totalamt value within the component.

Here is an illustration:

 <ion-item>
      <ion-label floating>Secondname</ion-label>
      <ion-input type="number"  name="secondname" [(ngModel)]="prodbum.secondname" (change)="findProd()" required></ion-input>
    </ion-item>
    <ion-item>
        <ion-label floating>Total: {{prodbum.username * prodbum.secondname}}</ion-label>
      <ion-input type="number" [(ngModel)]= "prodbum.totalamt"  readonly="true"></ion-input>
    </ion-item>
    <ion-item>

In your component file, implement the findProd() function like so:

    findProd(){
     if(prodbum.username && prodbum.secondname){
       prodbum.totalamt=prodbum.username * prodbum.secondname;
     }
   }

You can trigger the same function by utilizing the change event of the initial input field.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

My question might not be articulated correctly. I'm facing an issue with dynamically translating my webpage using Microsoft's Cognitive Services Translator. I created a react hook for the translator, which works well when I need to translate a si ...

Cannot assign a string literal type in TypeScript to a type parameter that is extending a string literal type

Here is some code snippet that exhibits a specific issue: type FooType = 'Bar'; abstract class Meow<T extends FooType> { baz: T = 'Bar'; } An error is triggered stating Type '"Bar"' is not assignable to type 'T ...

Having trouble implementing the Material UI time picker because it does not meet the required DateTime format

REVISE I recently switched my dataType from DateTime to TimeSpan in my code. I have a functioning MVC version that already uses TimeSpan, and the times are posted in HH:MM format. Now, I am unsure if the issue lies with the headers set up on Axios or if it ...

The intersection type of an array gets lost when used in the map() function

Running into an issue with my TypeScript code snippet where the mapped type is losing intersection type information inside the map(). type Foo = { foo: number }; type Bar = { bar: string }; const arr: Foo[] & Bar[] = [{ foo: 1, bar: 'bar' }] ...

What is the method for loading dynamic scripts within Angular?

Angular Version: 7.1.4 In an attempt to resolve the issue of script loading errors, specifically 'Uncaught TypeError: Can not read property Responsive' of undefined', I explored a potential solution which involved creating a service for ...

Typescript - Postpone defining generic type until invoking function

Trying to modify an existing API by defining a generic type to determine the key/value pairs that can be passed to the function, and also for IntelliSense purposes. (Working with vue.js in this case, but it's not crucial.) Here is the structure of th ...

Maximizing Performance: Enhancing Nested For Loops in Angular with Typescript

Is there a way to optimize the iteration and comparisons in my nested loop? I'm looking to improve my logic by utilizing map, reduce, and filter to reduce the number of lines of code and loops. How can I achieve this? fill() { this.rolesPermiAdd = ...

The Typescript compiler is throwing an error in a JavaScript file, stating that "type aliases can only be used in a .ts file."

After transitioning a react js project to react js with typescript, I made sure to move all the code to the typescript react app and added types for every necessary library. In this process, I encountered an issue with a file called HeatLayer.js, which is ...

How to dynamically modify ion-list elements with Ionic on button click

Imagine having 3 different lists: List 1: bus, plane List 2: [related to bus] slow, can't fly List 3: [related to plane] fast, can fly In my Ionic Angular project, I have successfully implemented the first ion-list. How can I dynamically change th ...

Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these arti ...

The powerful combination of harp.gl and Angular NG

We've integrated harp.gl into our ng Angular application, but we're encountering issues when trying to connect to data sources that previously worked in our yarn demo. The datasource is created as follows: const dataSource = new OmvDataSour ...

managing commitments in TypeScript

Is there a way to convert a promise into a string, or is there another method for handling this result? I am encountering an error stating "You cannot use an argument of type 'Promise' for a parameter of type 'string'." const pokemonIma ...

Import TypeScript files with RequireJS

I'm looking for some clarification on RequireJS. Right now, I compile all my Typescript files into one JS file. If I switch to RequireJS, does that mean I won't have just one JS file anymore? As I understand it, RequireJS dynamically loads JS f ...

Understanding the mechanisms of Promise functionality within Typescript can be challenging, particularly when encountering error messages such as "type void is not

Recently, I've delved into the world of Typescript. Despite my efforts to stay true to the typing system, I've encountered a challenge that forces me to resort to using the any type: The issue arises with a function that returns a promise: sav ...

What is the most effective method to inform TypeScript that every element in an array is present in a Map?

Consider a scenario where you are creating a Map from an array of objects with unique ids as keys, and then accessing the map from another array that shares the same ids: const arr1 = [ {id: 'a', firstName: 'Mike'}, {id: 'b&apo ...

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

Incorporating a Material-UI table pagination component into my React application, I am striving to position the text that indicates the current range of rows between the two action buttons (previous and next). <TablePagination ...

Defining a property of an object within a Vue Class

If I were to write it in JavaScript version: export default { data() { return { users: {} } } } However, when using a class style component with vue-property-decorator: @Component export default class Login extends Vue { public title ...

Issue: Attempting to assign a 'boolean' variable to a type of 'Observable<boolean>' is not compatible

I am currently working on the following code: import {Injectable} from '@angular/core'; import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router'; import {Observable} from 'rxjs' ...

Angular: How to access elementRef within an ng-template

I have a situation where I am using a component to render different form-field components through the use of ng-template. My goal is to access a function within the last rendered component. I have attempted to access this function using ViewChildren() ann ...

Issue Establishing Connection Between Skill and Virtual Assistant Via Botskills Connect

Encountering errors while connecting a sample skill to a virtual assistant. Both are in typescript and function individually, but when using botskills connect, the following errors occur: Initially, ran botskills connect with the --localManifest parameter ...