Angular无法获取Quiz Id求助（Postman调用正常）

Postman调用SpringBoot后端API可正常获取Quiz Id，但Angular应用中该字段返回undefined，Category ID、Question ID等其他字段均能正常获取。

问题核心原因 #

从后端返回数据可见，后端返回的Quiz ID字段名为id，但Angular的Quiz接口中定义的字段名为qId，字段名称不匹配导致无法正确映射，这是问题的根本原因。

解决方案 #

方案1：修改Angular端字段名（推荐） #

将Angular的Quiz接口及所有使用该字段的地方，统一改为与后端一致的id：

// 更新Quiz接口
interface Quiz {
  id: number; // 替换原qId
  title: string;
  description: string;
  maxMarks: number;
  numberOfQuestions: number;
  active: boolean;
  category: {
    cid: number;
    title: string;
  };
}

同时更新组件和模板中的引用：

• HTML模板：[routerLink]="'/admin/view-questions/' + q.id + '/' + q.title"、(click)="deleteQuiz(q.id)"
• 组件逻辑：this.quizzes = this.quizzes.filter((quiz) => quiz.id !== qId)

方案2：修改SpringBoot后端返回字段名 #

若需保留Angular端的qId命名，可在后端实体类的id字段上添加注解，指定JSON返回字段名：

import com.fasterxml.jackson.annotation.JsonProperty;

public class Quiz {
    @JsonProperty("qId")
    private Integer id;
    // 其他字段及getter/setter方法
}

相关代码参考 #

ViewQuizzesComponent组件 #

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import {  MatCardModule } from '@angular/material/card';
import { RouterLink } from '@angular/router';
import Swal from 'sweetalert2';
import { QuizService } from '../../../services/quiz.service';

interface Quiz {
  qId: number;
  title: string;
  description: string;
  maxMarks: number;
  numberOfQuestions: number;
  active: boolean;
  category: {
    cid: number;
    title: string;
  };
}

@Component({
  selector: 'app-view-quizzes',
  standalone: true,
  imports: [CommonModule,
    MatCardModule,
    MatButtonModule,
    RouterLink,],
  templateUrl: './view-quizzes.component.html',
  styleUrl: './view-quizzes.component.css'
})
export class ViewQuizzesComponent {
  quizzes: Quiz[] = [];

  constructor(private _quiz: QuizService) {}

  ngOnInit(): void {
    this._quiz.quizzes().subscribe(
      (data: any) => {
        this.quizzes = data;
        console.log(this.quizzes);
      },
      (error) => {
        console.log(error);
        Swal.fire('Error !', 'Error in loading data !', 'error');
      }
    );
  }

  deleteQuiz(qId: number) {
    console.log('Deleting quiz with ID:', qId);
    Swal.fire({
      icon: 'info',
      title: 'Are you sure ?',
      confirmButtonText: 'Delete',
      showCancelButton: true,
    }).then((result) => {
      if (result.isConfirmed) {
        this._quiz.deleteQuiz(qId).subscribe(
          (data) => {
            this.quizzes = this.quizzes.filter((quiz) => quiz.qId !== qId);
            Swal.fire('Success', 'Quiz deleted ', 'success');
          },
          (error) => {
            Swal.fire('Error', 'Error in deleting quiz', 'error');
          }
        );
      }
    });
  }
}

ViewQuizzesComponent HTML模板 #

<mat-card class="mt10 mr20 ml20" *ngFor="let q of quizzes">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>
      {{ q.title }}
    </mat-card-title>
    <mat-card-subtitle>
      {{ q.category.title }}
    </mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>{{ q.description }}</p>
  </mat-card-content>
  <mat-card-actions>
    <button
      [routerLink]="'/admin/view-questions/' + q.qId + '/' + q.title"
      mat-flat-button
      color="accent"
    >
      Questions
    </button>
    <button mat-stroked-button color="accent" class="ml20">
      Max Marks: {{ q.maxMarks }}
    </button>
    <button mat-stroked-button color="accent" class="ml20">
      Questions: {{ q.numberOfQuestions }}
    </button>
    <button
      [routerLink]="'/admin/quiz/' + q.qId"
      mat-flat-button
      color="accent"
      class="ml20"
    >
      Update
    </button>
    <button mat-flat-button color="accent" class="ml20">Attempts</button>

    <button
      mat-flat-button
      color="warn"
      class="ml10"
      (click)="deleteQuiz(q.qId)"
    >
      Delete
    </button>
  </mat-card-actions>
</mat-card>

<div class="container text-center mt20">
  <button routerLink="/admin/add-quiz" mat-raised-button color="accent">
    Add New Quiz
  </button>
</div>

QuizService服务 #

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import baseUrl from './helper';

@Injectable({
  providedIn: 'root',
})
export class QuizService {
  constructor(private http: HttpClient) {}

  public quizzes() {
    return this.http.get(`${baseUrl}/quiz/`);
  }

  public addQuiz(quiz: any) {
    return this.http.post(`${baseUrl}/quiz/`, quiz);
  }

  public deleteQuiz(qId: number) {
    return this.http.delete(`${baseUrl}/quiz/${qId}`);
  }

  public getQuiz(qId: number) {
    return this.http.get(`${baseUrl}/quiz/${qId}`);
  }

  public updateQuiz(quiz: any) {
    return this.http.put(`${baseUrl}/quiz/`, quiz);
  }

  public getQuizzesOfCategory(cid: number) {
    return this.http.get(`${baseUrl}/quiz/category/${cid}`);
  }

  public getActiveQuizzes() {
    return this.http.get(`${baseUrl}/quiz/active`);
  }

  public getActiveQuizzesOfCategory(cid: number) {
    return this.http.get(`${baseUrl}/quiz/active/${cid}`);
  }
}

内容的提问来源于stack exchange，提问作者Swapnil Kashish