无法以角度更新数据

Question

我正在尝试构建一个 .net core web api + Angular11(Full-Stack) 项目。我在 back_End 中成功创建了向 DB 添加数据。但是当我尝试更新我的数据时遇到了问题。 这是我的代码：-

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);
         }
}

这是我的错误输出：-

当我点击“编辑”按钮进行编辑时，我发现上面的错误。

我不明白我的代码有什么问题。我如何解决这个问题。我是 Angular 的绝对初学者。请帮助。

Answer 1

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

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

首先，根据控制台错误，我们可以发现你通过URL传递的question.id的实际值为undefined，所以请检查是否应该修改为question.Id。

要解决该问题，您可以检查您在浏览器开发工具“网络”选项卡中发布的实际请求和数据，并检查请求标头或发布的数据是否有问题。

此外，请检查您是否从您的操作方法返回BadRequestResult，如下所示。

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

    //...