CODEWITHSUNDEEP
angularangular5angular6
zaid khan
zaid khan

Reputation: 213

Geting object, both id and value from ngFor on button click angular 6

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.

enter image description here

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

Upvotes: 1

Views: 434

Answers (1)

CruelEngine
CruelEngine

Reputation: 2841

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

Upvotes: 1

Related Questions