Geting object, both id and value from ngFor on button click angular 6
1
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
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
|
show 14 more comments
1
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
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
Where exactly are you calling thechangeSubjectmethod?
– SiddAjmera
Nov 19 '18 at 6:58
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
you are passing only one parameter herechangeSubject(sub)but this methodchangeSubject(value : any, QID : string)accepts two parameters. and also please share complete code for better understanding.
– ashish pal
Nov 19 '18 at 7:07
<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
Nov 19 '18 at 7:10
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
Nov 19 '18 at 9:41
|
show 14 more comments
1
1
1
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
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
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
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
edited Nov 19 '18 at 9:39
Ashish Kamble
632519
632519
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
asked Nov 19 '18 at 6:56
zaid khanzaid khan
638
638
Where exactly are you calling thechangeSubjectmethod?
– SiddAjmera
Nov 19 '18 at 6:58
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
you are passing only one parameter herechangeSubject(sub)but this methodchangeSubject(value : any, QID : string)accepts two parameters. and also please share complete code for better understanding.
– ashish pal
Nov 19 '18 at 7:07
<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
Nov 19 '18 at 7:10
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
Nov 19 '18 at 9:41
|
show 14 more comments
Where exactly are you calling thechangeSubjectmethod?
– SiddAjmera
Nov 19 '18 at 6:58
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
you are passing only one parameter herechangeSubject(sub)but this methodchangeSubject(value : any, QID : string)accepts two parameters. and also please share complete code for better understanding.
– ashish pal
Nov 19 '18 at 7:07
<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
Nov 19 '18 at 7:10
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
Nov 19 '18 at 9:41
Where exactly are you calling the
changeSubject method?– SiddAjmera
Nov 19 '18 at 6:58
Where exactly are you calling the
changeSubject method?– SiddAjmera
Nov 19 '18 at 6:58
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
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
Nov 19 '18 at 7:07
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
Nov 19 '18 at 7:07
<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
Nov 19 '18 at 7:10
<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
Nov 19 '18 at 7:10
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
Nov 19 '18 at 9:41
@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
Nov 19 '18 at 9:41
|
show 14 more comments
1 Answer
1
active
oldest
votes
1
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
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
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',
autoActivateHeartbeat: false,
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
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
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
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
add a comment |
1
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
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
add a comment |
1
1
1
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
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
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
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
answered Nov 19 '18 at 9:36
CruelEngineCruelEngine
9991919
9991919
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Where exactly are you calling the
changeSubjectmethod?– SiddAjmera
Nov 19 '18 at 6:58
Where does this button positioned in your template? Can you please add the complete template of your component for clarity.,
– SiddAjmera
Nov 19 '18 at 7:07
you are passing only one parameter here
changeSubject(sub)but this methodchangeSubject(value : any, QID : string)accepts two parameters. and also please share complete code for better understanding.– ashish pal
Nov 19 '18 at 7:07
<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
Nov 19 '18 at 7:10
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
Nov 19 '18 at 9:41