How can I bind object id from *ngFor item in Angular Select? At the moment, the select bind the same value as interpolation do.

Question

I have a list listSiteTriage. I would like to bind to the controller selected value.

  <select [(ngModel)]="selectedSite" (ngModelChange)="onChange()">
                  <option *ngFor="let site of listSiteTriage" >{{site.Intitule}}</option>
                </select>

controller:

import { Component, OnInit, OnChanges, NgModule} from '@angular/core';

@Component({
 selector: 'xxx',
 templateUrl: './xxx.component.html',
 styleUrls: ['./xxx.component.scss']
 })
 export class Travaux implements OnInit , OnChanges {

 listSiteTriage: any[];
 site: any;


 } 
  onChange(){
  console.log(this.selectedSite);
  }
 }

Answer 1

Remove [ngValue]

<select [(ngModel)]="site" (ngModelChange)="onChange()">
         <option *ngFor="let site of listSiteTriage" >{{site.Intitule}}</option>
  </select>

Answer 2

You are iterator and the ngModel variables are both named as site rename it to be different (for instance selectedSite )

<select [(ngModel)]="selectedSite" (ngModelChange)="onChange()">
      <option *ngFor="let site of listSiteTriage" [ngValue]="site.Id">{{site.Intitule}}</option>
</select>

import { Component, OnInit, OnChanges, NgModule} from '@angular/core';

@Component({
 selector: 'xxx',
 templateUrl: './xxx.component.html',
 styleUrls: ['./xxx.component.scss']
 })
 export class Travaux implements OnInit , OnChanges {

listSiteTriage: any[];
selectedSite: any = 1;

onChange(){
      console.log(this.site);
  }
}