Angular 中未获取测验 ID

Question

嗨，我正在尝试从服务器端获取 Qid，在邮递员中它工作正常，但在角度上无法正常运行 仅当尝试获取其他测验 ID（例如类别 ID 和问题 ID）正确出现时，才会出现此问题。

查看测验组件

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) {
        //delete...

        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>

测验服务

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

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

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

  //get the single quiz

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

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

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

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

SpringBoot API

这个问题 ID 被获取为未定义，即使我猜它被正确获取。请帮助解决这个问题。

Answer 1

在 JavaScript 中，

undefined

表示该属性在对象上不存在。当从 API 接收响应时，您需要 JS 对象包含 API 响应对象的所有 public 成员。

需要验证的一些基本事项：

• API Response 对象上是否存在预期的属性？
  • 房产是公共的吗？如果没有，序列化器将不会包含它。
• JS 或 API Response 对象属性是否有拼写错误？

如果可能，考虑使用自动代码生成工具来创建 JS 模型以匹配 API Response 对象。