Блог

Вот html-часть:

 <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

 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

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

часть контроллера rest

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

часть реализации запроса

 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();
    }
}

  

Он правильно получает количество записей в списке, но не может отобразить результаты.

Когда я использовал встроенный репозиторий JPA, он работал нормально, но когда я переключился на свои пользовательские запросы в соответствии с требованиями, похоже, это не сработало.

Это ответ API

 [[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]]

  

Вы получаете ответ в виде массива и пытаетесь выполнить итерацию с использованием ключей, попробуйте выполнить итерацию с использованием индекса.

проверьте пример здесь

В вашем случае результат возвращает List<Object[]> :

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

просто добавьте resultClass параметр в createNativeQuery() :

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

вот почему:

Когда я использовал встроенный репозиторий JPA, он работал нормально, но когда я переключился на свои пользовательские запросы в соответствии с требованиями, похоже, это не работает

Из ответа API я могу сказать, что объект не является парой ключ-значение, а это просто вложенные массивы строк. Вам нужно изменить объект для ngFor примерно так, как показано ниже.

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;
}
  

Вы можете создать класс с именем Test и вы можете манипулировать своими данными, и как только это будет сделано, вы сможете использовать ngFor для отображения данных.

app.component.html

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

Вот ссылка на Stackblitz.

Надеюсь, это решило вашу проблему.

Что касается приложений angular и Spring Boot, проверьте мой пример и прочитайте мой документ.