I have been working on a project involving a .NET Core Web API and Angular 11 (Full-Stack) project. I have successfully managed to add data to the database in my back-end, but I am encountering an issue when trying to update the data. Below is a snippet of my code:
question.component.html
<mat-card >
<mat-card-title>
<span *ngIf="question.Id">Edit Question</span>
<span *ngIf="!question.Id">Edit Question</span>
</mat-card-title>
<mat-card-content>
<form>
<mat-form-field class="fullwidth">
<mat-label>Question</mat-label>
<input [(ngModel)]="question.text" name="question" matInput placeholder="Question">
</mat-form-field>
<mat-form-field class="fullwidth">
<mat-label>Question</mat-label>
<input [(ngModel)]="question.correctAnswer" name="correctAnswer" matInput placeholder="Correct Answer">
</mat-form-field>
<mat-form-field class="fullwidth">
<mat-label>Question</mat-label>
<input [(ngModel)]="question.answer1" name="answer1" matInput placeholder="Wrong Answer 1">
</mat-form-field>
<mat-form-field class="fullwidth">
<mat-label>Question</mat-label>
<input [(ngModel)]="question.answer2" name="answer2" matInput placeholder="Wrong Answer 2">
</mat-form-field>
<mat-form-field class="fullwidth">
<mat-label>Question</mat-label>
<input [(ngModel)]="question.answer3" name="answer3" matInput placeholder="Wrong Answer 3">
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions>
<button (click)="post(question)" mat-button>POST</button>
</mat-card-actions>
</mat-card>
questions.component.html
(please no doubt.above is "question component" this is "questions component" **s**)<mat-card >
<mat-card-content>
<mat-list *ngFor=" let question of questions">
<mat-list-item class="clickLink" (click)="api.selectQuestion(question)">{{question.text}}</mat-list-item>
</mat-list>
</mat-card-content>
<mat-card-actions>
<button (click)="post(question)" mat-button>POST</button>
<button (click)="put(question)" mat-button>EDIT</button>
</mat-card-actions>
</mat-card>
question.component.ts
import {Component} from '@angular/core'
import {ApiService} from './api.service'
@Component({
selector:'question',
templateUrl:'./question.component.html'
})
export class QuestionComponent{
question: { text?: string;correctAnswer?:string;answer1?: string;answer2?:string;answer3?:string;Id?:any; } = {}
constructor(private api:ApiService){}
ngOnInit()
{
this.api.questionSelected.subscribe(question=>this.question=question);
}
post(question)
{
this.api.postQuestion(question);
}
}
questions.component.ts
import {Component} from '@angular/core'
import {ApiService} from './api.service'
@Component({
selector:'questions',
templateUrl:'./questions.component.html'
})
export class QuestionsComponent{
question: { text?: string;correctAnswer?:string;answer1?: string;answer2?:string;answer3?:string } = {}
questions
constructor(public api:ApiService){}
ngOnInit()
{
this.api.getQuestions().subscribe(res=>{
this.questions=res;
});
}
post(question)
{
this.api.postQuestion(question);
}
put(question)
{
this.api.putQuestions(question);
}
}
api.service.ts
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Subject} from 'rxjs';
@Injectable()
export class ApiService{
private selectedQuestion=new Subject<any>();
questionSelected=this.selectedQuestion.asObservable();
constructor(private http:HttpClient){}
postQuestion(question)
{
this.http.post ('https://localhost:44362/api/questions',question).subscribe(res=>{
console.log(res)
})
}
getQuestions()
{
return this.http.get ('https://localhost:44362/api/questions');
}
putQuestions(question)
{
this.http.put (`https://localhost:44362/api/questions/${question.id}`,question).subscribe(res=>{
console.log(res)
})
}
selectQuestion(question)
{
this.selectedQuestion.next(question);
}
}
Here is my Output with Error:-
https://i.sstatic.net/aA3Vo.png
When I click the "Edit" button for editing, I encounter the error shown in the image above.
I am having trouble understanding what's causing this issue in my code. As a beginner in Angular, any help or guidance will be greatly appreciated.