在删除函数中获取未定义的id

Question

我正在尝试编写一个删除函数来从我的对象中删除测验。

这是我的代码，但是当我单击删除按钮时，我收到 DELETE: Error。

您认为我的代码中有什么错误？

您可以在这里查看我的代码...

import { Component, OnInit } from '@angular/core';
import { QuizService } from 'src/app/services/quiz.service';
import Swal from 'sweetalert2';
import { Quiz } from './Quiz';

@Component({
  selector: 'app-view-quizzes',
  templateUrl: './view-quizzes.component.html',
  styleUrls: ['./view-quizzes.component.css']
})
export class ViewQuizzesComponent implements OnInit{

  
  quizzes: Quiz[] = [];
  
  constructor(private _quiz:QuizService){
    
  }
  ngOnInit(): void {
    this._quiz.quizzes().subscribe(


      
      (data: any) => {

        

        this.quizzes = data as Quiz[]; 
        console.log(this.quizzes); // Add this line
      },
      (error) => {
        console.log(error);
        Swal.fire('Error', 'Error in loading data!', 'error');
      }
    );
}

deleteQuiz(q:any ):void{
    alert(q.qId)
    
 }

}

ViewQuizzesComponent.ts 文件

<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 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">Number of Qustions: {{ q.numberOfQuestions}}</button>
        <button 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="ml20" (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>

ViewQuizzesComponent.html 文件

// Define an interface for quiz objects
export interface Quiz {
  
  qId: number,
  title: string,
  description:string,
    maxMarks:string,
    numberOfQuestions:string,
    category:{
      title:string
    }

   
   
  }
  
 

Quiz.ts 界面

我在点击事件的deleteQuiz(qId)函数中收到qId未定义的警报框，而不是获取当前测验id

Answer 1

您将 quizId 传递给 deleteQuiz 函数，但该函数期望接收完整的测验对象。

像这样编辑函数

deleteQuiz(qId: number):void{
    alert(qId)
}