无法更新角度数据 [英] Failed to update data in angular

问题描述

我正在尝试构建.net核心Web api + Angular11(Full-Stack)项目.我在back_End中成功创建了Add Data to DB.但是在尝试更新数据时遇到了问题.这是我的代码:-

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

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 (请毫无疑问，以上是"question component"；这是"questions component" ** s **)

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

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

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

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.

我不明白我的代码有什么问题.如何解决此问题.我绝对是Angular.plase帮助的初学者.

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

推荐答案

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

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

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

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

首先，基于控制台错误，我们可以发现您通过URL传递的 question.id 的实际值是 undefined ，因此请检查是否应对其进行修改与 question.Id .

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.

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

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

    //... 

这篇关于无法更新角度数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！