Angular ngModelChange parameter function different to $event

Issue

I want to send 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 would like to send the parameter in the function filterFor call:

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

Fails:

error TS2551: Property ‘dano’ does not exist on type ‘ComunidadFiltracionesComponent’. Did you mean ‘danos’? .

Do you know the format of the parameter so that it accepts it?
Thanks in advance

Expand the query:

I have an object with different parameters:

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

In dropdown (ngFor), when the customer selects the make of the car, we take the comment variable.

If I want to compare vehicles:

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

To find out which brand the client has entered, I have to compare through the comment (too long). I want to compare by the brand variable:

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

See in stackblitz : https://angular-ivy-mu5mrh.stackblitz.io/

Solution

if you use (ngModelChange)="filterFor($event)" in your function filterFor you received the [value] of the option selected.

if you use as value [value]="dano.make"

You can use some like

filterFor(value:any){
   this.data=value; //<--if not use [(ngModel)] else [ngModel]
                    //don't forget equal the variable to value

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

Answered By – Eliseo

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.