Unable to display list of elements using *ngFor in Angular + Spring Boot project

Here is the html part:

<thead>
                <tr>
                    <th scope="col">Test ID</th>
					<th scope="col">Test Name</th>
					<th scope="col">Test Start Date</th>
					<th scope="col">Test End Date</th>
                    <th scope="col">Test Duration (minutes)</th>
                    <th scope="col">Negative Markinh</th>
                    <th scope="col">Add Questions</th> 
					<th scope="col">View Questions</th>
                    <th scope="col">No of Questions</th>
                    <th scope="col">Delete Test</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let test of tests">
                    <th>{{test.test_id}}</th>
                    <td>{{test.test_name}}</td>
                    <td>{{test.test_start_date | date:"dd/MM/yyyy"}}</td>
                    <td>{{test.test_end_date | date:"dd/MM/yyyy"}}</td>
                    <td>{{test.test_duration}}</td>
                    <td>{{test.negative_marking}}</td>
                    <td><button type="button" class="btn btn-success" (click)="addQuestions(test.test_id)"> Add Questions </button></td>
                    <td><button type="button" class="btn btn-info" (click)="viewQuestions(test.test_id)">View Questions</button></td>
                    <td>{{test.no_of_questions}}</td> 
                    <td><button type="button" class="btn btn-danger" (click)="deleteTest(test.test_id)">Delete</button></td>
                </tr>

            </tbody>

component.ts file

tests:any;
  
  questions:any;

  constructor(private service:TeacherPartService,
    private router:Router
    ) { }

  ngOnInit() {
    let response = this.service.viewTests();
    response.subscribe(data=>{
      console.log('data='+data+'\n');
      this.tests = data;
    });
    console.log('this.tests='+this.tests);

  }

service.ts file

public viewTests(){
    return this.http.get("http://localhost:8081/viewTests");
  }

the rest controller part

@GetMapping("/viewTests")
	public List<Test> viewAllTests(){
		System.out.println("viewTestss works");
		return (List<Test>)testRepo.viewTests();
	}

the query implementation part

package com.exam.dao;

import java.util.List;

import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.persistence.Query;
import javax.transaction.Transactional;

import org.springframework.stereotype.Repository;

import com.exam.model.Test;

@Repository
public class TestRepository {
	@PersistenceContext
    private EntityManager entityManager;
	
	public List<Test> viewTests(){
		Query query = entityManager.createNativeQuery("select * from test");
		return (List<Test>)query.getResultList();
	}
}

It correctly gets the no of entries in the list but is unable to display the results.

When I used the inbuilt JPA repository it was working fine but when I switched to my custom queries as per the requirements it doesn't seem to work.

This is the API response

[[4,"second","2020-08-01","2020-09-04",0,120,true,1],[5,"newTest28080116","2020-08-28","2020-09-01",4,100,false,1],[6,"newTest28080118","2020-08-08","2020-09-01",0,300,true,1],[7,"SCI_2808","2020-08-29","2020-09-05",0,50,true,1],[8,"sampleTest","2020-08-28","2020-09-11",0,90,false,1]]

You are getting the response in an array and trying to iterate using keys, try to iterate using the index.

check sample here

From the API response, I can say that the object is not a key-value pair and it's just nested string arrays. You need to change the object for the ngFor something like below.

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  testActualObject: Test[] = [];

  test = [[4,"second","2020-08-01","2020-09-04",0,120,true,1],[5,"newTest28080116","2020-08-28","2020-09-01",4,100,false,1],[6,"newTest28080118","2020-08-08","2020-09-01",0,300,true,1],[7,"SCI_2808","2020-08-29","2020-09-05",0,50,true,1],[8,"sampleTest","2020-08-28","2020-09-11",0,90,false,1]];

  ngOnInit(){
    console.log(this.test);
    this.test.forEach(test => {
     var testActualObj = new Test();
     testActualObj.test_id = test[0];
      testActualObj.test_name = test[1];
      this.testActualObject.push(testActualObj);
    });
  }


}

export class Test {
  test_id: any;
  test_name: any;
}

You can create a class called Test and you can manipulate your data and once it is done you can ngFor it to display the data.

app.component.html

<div *ngFor="let actualobj of testActualObject">
  ID: {{actualobj.test_id}} <br />
  testName: {{actualobj.test_name}}
</div>

Here is the Stackblitz link.

Hope this resolved your issue.

In your case, the result returns List<Object[]>:

entityManager.createNativeQuery("select * from test")
    .getResultList()

just add resultClass param to createNativeQuery():

entityManager.createNativeQuery("select * from test", Test.class)
    .getResultList()

that's why:

> When I used the inbuilt JPA repository it was working fine but when I switched to my custom queries as per the requirements it doesn't seem to work

For the angular and Spring Boot application, check my sample, and read my doc.