The function parameter in Angular's ngModelChange behaves differently than $event

How can I pass a different parameter to the $event in the function?

 <div class='col-sm'>
      <label class="col-3 col-form-label">Origen</label>
          <div class="col-4">
              <select [(ngModel)]="dana" class="form-control"  
                 (ngModelChange)="filterFor($event)"required>
                   <option *ngFor="let dano of danos" 
                       [value]="dano.comment">{{dano.make}}
                   </option>
             </select>
          </div>
     </div>

I am trying to send a specific parameter when calling the filterFor function:

    <div class='col-sm'>
         <label class="col-3 col-form-label">Origen</label>
             <div class="col-4">
                 <select [(ngModel)]="dana" class="form-control"  
                     (ngModelChange)="filterFor(dano.tipo)"required>
                   <option *ngFor="let dano of danos" 
                        [value]="dano.comment">{{dano.make}}
                   </option>
                 </select>
             </div>
       </div>

Error Message:

Error TS2551: Property 'dano' does not exist on type 'ComunidadFiltracionesComponent'. Did you mean 'danos'? .

Do you have any idea how to format the parameter correctly so that it is accepted? Thank you in advance

Elaborating further:

I have an object with various parameters:

let car = [ {'make': 'Ford', 'comment': 'The vehicle has a heavy internal combustion engine....'}];

When a selection is made from the dropdown list (ngFor), we capture the comment variable based on the selected car make.

If I want to compare cars:

if (dana == 'The vehicle has a heavy internal combustion engine....'){
this.quality = 'good';
}

To determine which brand the customer has entered, I need to compare using the make variable instead of the lengthy comment. How can I achieve this?

if (dana == 'Ford'){
this.quality = 'good';
}

Check out the code on stackblitz :

javascriptangulartypescriptfilterngfor

Answer №1

When you use 

(ngModelChange)="filterFor($event)"
within your filterFor function, you will receive the value of the selected option.

If you set the value as [value]="dano.make"

You can implement something like this

filterFor(value:any){
   this.data=value; //<--if not using [(ngModel)] else [ngModel]
                    //Make sure to assign the variable to the value

   const dano=this.datos.find(x=>x.make==value)
   console.log(dano) //<--here you have the entire object
   //You can, for example
   if (value=='Ford')....
   //or
   if (dano.comment=='The vehicle has a heavy internal..')...
}

Answer №2

The problem with your code is that you are attempting to access the variable dano outside of its scope in the loop, causing it to not be recognized.

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

Identify the geometric figure sketched on the canvas using the coordinates stored in an array

After capturing the startX, startY, endX, and endY mouse coordinates, I use them to draw three shapes (a line, ellipse, and rectangle) on a canvas. I then store these coordinates in an array for each shape drawn and redraw them on a cleared canvas. The cha ...

javascripthtmlcanvas

JavaScript special character encoding techniques

I'm trying to create a function to remove special characters in my JavaScript code. However, whenever I try using chr(46), it throws a syntax error. Does anyone have any suggestions on how I can successfully implement chr(46) in my JS code? storageV ...

javascriptsyntax-errorjavascript-framework

Unable to retrieve Google Maps route on Android device

After discovering the route between two latitude and longitude values on Google Maps using "Get Directions," everything appears accurately. However, when attempting to use the same directions in an Android mobile application, only the destination marker ...

javascriptandroidgoogle-maps

Unable to iterate through array using jQuery promise (when > then) due to issues with $.each and $.ajax

I have been experimenting with different approaches and searching for solutions without success. Currently, I am working with an array of users: var arr = ['tom', 'sally', 'jill', 'sam', 'john']; My goal ...

javascriptjqueryarraysajaxasynchronous

Is there a way to verify if this route leads to a valid page?

I am currently using Angular 5 along with localize-router. Unfortunately, localize-router does not support paths without a language prefix (only the main page), so I decided to create a component to handle this issue. In my router configuration, I have set ...

angular

The generation of the npm bin script is not working as expected on Windows operating systems

I'm working on developing an NPM package for command line use. I've set up npm's bin in my package.json to specify the JS file to be executed. Here is a snippet from my package.json: "name": "textree", "bin": { "textree": "./src/cli.js" ...

javascriptnode.jsnpmcommand-line-interface

Despite providing the correct token with Bearer, Vue 3 is still experiencing authorization issues

I am working on a project that involves Vue 3 with a Node Express back-end server and Firebase integration. On the backend server, I have implemented the following middleware: const getAuthToken = (req, _, next) => { if ( req.headers.authori ...

javascriptnode.jsexpressvue.jstoken

Tips for emphasizing a searched item in V-data-table using VueJS

Is it possible to highlight a specific value in a v-data-table by searching for a particular word? Below is a snippet of my current code: EDIT: I am using the CRUD-Actions Example from the official Vuetify documentation. https://vuetifyjs.com/en/componen ...

javascriptvue.jsvuejs2vuetify.js

In VueJS, v-slot is consistently null and void

Here is the issue at hand. Main view: <template> <div class="main"> <Grid :rows=3 :cols=4> <GridItem :x=1 :y=1 /> <GridItem :x=2 :y=1 /> </Grid> </div> </template> <scrip ...

javascriptvue.jsvue-component

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

javascriptjqueryhtmlcssbootstrap-4

Adding a unique prefix for Angular2 routes in various environments

Imagine you are working on an Angular2 application in the development phase, and it is currently running smoothly on localhost:3000. All the routes are functioning properly. However, for deployment on myserver.com/myapp/, you need to add a prefix of myapp ...

angularangular2-routing

Issues arise as a result of conflicts between the dependencies of @ionic/angular, Angular 13, typescript,

Current Environment Details: ionic info Ionic: Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.8.5 @angular-devkit/build-angular : 13.0.2 @angular-devkit/schemat ...

angulartypescriptionic-frameworknpmionicons

"Encountering a 404 error with the angular2-in-memory-web-api

Currently, I am in the process of developing a 5 minute application using Angular 2 with reference to this particular guide: https://angular.io/docs/ts/latest/tutorial/toh-pt6.html. While working on the HTTP section, I encountered a 404 error due to the a ...

javascriptangularnpmangular-cliangular2-http

The texture fails to display upon loading the .dae model

I'm attempting to load a .dae model in three.js, but it seems like the texture is not loading. Here is my code snippet: <script src="js/three.js"></script> <script src="js/Animation.js"></script> <script src="js/An ...

javascriptthree.js

Generate a new style element, establish various classes, and append a class to the element

Is there a more efficient solution available? $("<style>") .attr("type", "text/css") .prependTo("head") .append(".bor {border:2px dotted red} .gto {padding:10px; font-size:medium}"); $("input:text").addClass("bor gto").val("Enter your t ...

javascriptjquerycss

How can we use tsyringe (a dependency injection library) to resolve classes with dependencies?

I seem to be struggling with understanding how TSyringe handles classes with dependencies. To illustrate my issue, I have created a simple example. In my index.tsx file, following the documentation, I import reflect-metadata. When injecting a singleton cl ...

reactjstypescriptdependency-injectiontsyringe

Accessing a factory's functions within itself in Angular

I'm really trying to understand how all of this operates. It seems like it should be working as intended. I have an Auth factory that, when the jwt token expires, calls its 'delegate' method which obtains a new token using the refresh token. ...

javascriptangularjsjwt

Error Message: Unable to retrieve property "country" as the variable this.props is not defined

Currently, I am developing a react application However, when running this function using infinite scroll, an error is encountered An Unhandled Rejection (TypeError) occurs: Unable to access the "country" property, since this.props is undefined async pa ...

javascriptreactjsreact-props

Tips for incorporating an entire JavaScript file into a React JS project

I'm facing an issue with a .js file (JavaScript file) that lacks exports code, containing only a constructor and some prototype methods. I am trying to incorporate this file into my ReactJS App. My approach involved adding a script tag in client/inde ...

javascriptreactjsreact-native

Mastering the art of simultaneously running multiple animations

Utilizing two functions to apply a Fade In/Fade Out effect on an element. Confident in the functionality of both functions, as testing them sequentially in the Console proves their effectiveness. However, executing: fadeIn() fadeOut() seems to result in ...

javascript