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

up vote
1
down vote

favorite

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.

angular angular5 angular6

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

asked 20 hours ago

zaid khan

537

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where exactly are you calling the changeSubject method?
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
  – ashish pal
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
  – zaid khan
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
  – zaid khan
  17 hours ago
  
  
  

  
  
  
  

 | 
show 14 more comments

up vote
1
down vote

favorite

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.

angular angular5 angular6

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

asked 20 hours ago

zaid khan

537

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where exactly are you calling the changeSubject method?
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
  – ashish pal
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
  – zaid khan
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
  – zaid khan
  17 hours ago
  
  
  

  
  
  
  

 | 
show 14 more comments

up vote
1
down vote

favorite

up vote
1
down vote

favorite

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.

angular angular5 angular6

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

asked 20 hours ago

zaid khan

537

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.

angular angular5 angular6

angular angular5 angular6

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

asked 20 hours ago

zaid khan

537

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

asked 20 hours ago

zaid khan

537

share|improve this question

share|improve this question

edited 17 hours ago

Ashish Kamble

569419

edited 17 hours ago

Ashish Kamble

569419

edited 17 hours ago

Ashish Kamble

569419

569419

asked 20 hours ago

zaid khan

537

asked 20 hours ago

zaid khan

537

asked 20 hours ago

zaid khan

537

537

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where exactly are you calling the changeSubject method?
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
  – ashish pal
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
  – zaid khan
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
  – zaid khan
  17 hours ago
  
  
  

  
  
  
  

 | 
show 14 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where exactly are you calling the changeSubject method?
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
  – SiddAjmera
  20 hours ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
  – ashish pal
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  <button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
  – zaid khan
  20 hours ago
  
  
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  @CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
  – zaid khan
  17 hours ago
  
  
  

  
  
  
  

Where exactly are you calling the changeSubject method?
– SiddAjmera
20 hours ago

Where exactly are you calling the changeSubject method?
– SiddAjmera
20 hours ago

Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
20 hours ago

Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
20 hours ago

you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
– ashish pal
20 hours ago

you are passing only one parameter here changeSubject(sub) but this method changeSubject(value : any, QID : string) accepts two parameters. and also please share complete code for better understanding.
– ashish pal
20 hours ago

<button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
– zaid khan
20 hours ago

<button value="Update Subject" (click)="changeSubject(sub, subject.id)">Update Subject</button> Sorry myt bad. this is the code. Still not getting any value
– zaid khan
20 hours ago

1

1

@CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
– zaid khan
17 hours ago

@CruelEngine omg. Thanks man. I was searching about this issues all the time. write your answer and i will mark it. Thanks brother
– zaid khan
17 hours ago

 | 
show 14 more comments

1 Answer
1

active

oldest

votes

up vote
1
down vote



accepted

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

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369692%2fgeting-object-both-id-and-value-from-ngfor-on-button-click-angular-6%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote



accepted

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

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

add a comment | 

up vote
1
down vote



accepted

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

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

add a comment | 

up vote
1
down vote



accepted

up vote
1
down vote



accepted

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

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

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

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

share|improve this answer

share|improve this answer

answered 17 hours ago

CruelEngine

8241917

answered 17 hours ago

CruelEngine

8241917

answered 17 hours ago

CruelEngine

8241917

8241917

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53369692%2fgeting-object-both-id-and-value-from-ngfor-on-button-click-angular-6%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here