Mixing
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
edited 17 hours ago
Ashish Kamble
569419
asked 20 hours ago
zaid khan
537
|
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
edited 17 hours ago
Ashish Kamble
569419
asked 20 hours ago
zaid khan
537
Where exactly are you calling thechangeSubjectmethod?
– 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 herechangeSubject(sub)but this methodchangeSubject(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
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
edited 17 hours ago
Ashish Kamble
569419
asked 20 hours ago
zaid khan
537
edited 17 hours ago
Ashish Kamble
569419
asked 20 hours ago
zaid khan
537
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 thechangeSubjectmethod?
– 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 herechangeSubject(sub)but this methodchangeSubject(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 thechangeSubjectmethod?
– 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 herechangeSubject(sub)but this methodchangeSubject(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
answered 17 hours ago
CruelEngine
8241917
add a comment |
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
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
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
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
answered 17 hours ago
CruelEngine
8241917
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
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
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 methodchangeSubject(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