Failed to update data in angular

Question

I am trying to build a .net core web api + Angular11(Full-Stack) project.I successfully created Add Data to DB in my back_End.but I am facing an issue when I trying to update my data. here is 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:-

When i click "Edit" button for edit.then i found above error.

i don't understand what's wrong in my code.how i resolve this issue.i am an absolute beginner in Angular.plase help.

Answer 1

this.http.put (https://localhost:44362/api/questions/${question.id},question).subscribe(

PUT https://localhost:44362/api/questions/undefined 400

Firstly, based on console error, we can find that the actual value of question.id you passed through URL is undefined, so please check if it should be modified with question.Id.

To troubleshoot the issue, you can check the actual request and data you posted in browser developer tool Network tab, and check if something wrong with request headers or posted data.

Besides, please check if you return a BadRequestResult from your action method, like below.

[HttpPut("{id}")]
public IActionResult Edit(int id, Question question)
{
    if (id != question.Id)
    {
        return new BadRequestResult();
    }

    //...