getting undefined id in delete function

Question

I am trying to write a delete function to delete a Quiz from my object.

This is my code but when I click on a delete button I get DELETE: Error.

What do you think is the error in my code?

You can check out my code here ...

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 file

<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 file

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

   
   
  }
  
 

Quiz.ts interface

i am getting qId undefined alert box in deleteQuiz(qId) function on click event instead of getting current quiz id

Answer 1

You are passing the quizId to the deleteQuiz function but the function expect to receive the full quiz object.

Edit the function like this

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