Nsryjdtyk

this is html code

<tr>

    <td>Select New Subject:</td>

    <td>

     <Select name="DesiredSubject" [(ngModel)] = "sub" ngDefaultControl>

       <option [value]="0">--Select Subject--</option>

       <option *ngFor ="let subj of subjects" [value]="subj">{{subj.bank_Name}}</option>

     </Select>

    </td>

  </tr>

  <tr>

    <td>Action :</td>

    <td><button value="Update Subject" (click)="changeSubject(sub)">Update Subject</button></td>

</tr>

and this is my typescript angular class

 export class EditSubjectComponent implements OnInit, AfterViewInit {



  @Input()

  subject : any;

  sub : any;

  flag : boolean = false;

  subjects : ISubject;

  constructor(private _QuestionService : QuestionService, private _toastr : ToastrService) { }



  ngOnInit() {

  }

  ngAfterViewInit(){

      this._QuestionService.getSubject().subscribe((data) => {this.subjects = data;});

    }

  changeSubject(value : any){

    this.flag = true;

    console.log(value)

   this._QuestionService.updateSubject(QID,value).subscribe((res) => {this._toastr.success("Subject Changed");

  }, err => {

       this._toastr.error("There is some problem. Please try later")

     });

    this.flag = false;

  }



}

and this is what i get in the console log. I mean it is returning a string.

what am i doing wrong? and i have updated the code now.

The issue is that you are binding an object to the [value] property . If you want to bind an object to your option value , use [ngValue] instead of [value] .

Also there is a typo in your html where select is implemented . Use <select> instead of <Select> .

Stackblitz example : https://stackblitz.com/edit/angular-3b5txx