无法在 Angular + Spring Boot 项目中使用 *ngFor 显示元素列表

Question

这里是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");
  }

其余控制器部分

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

Answer 1

您在数组中获取响应并尝试使用键进行迭代，尝试使用索引进行迭代。

check sample here

Answer 2

在你的情况下，结果返回List<Object[]>：

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

只需将resultClass 参数添加到createNativeQuery()：

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

这就是为什么：

当我使用内置的 JPA 存储库时，它运行良好，但是当我根据要求切换到自定义查询时，它似乎不起作用

Answer 3

从 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 link。

希望这能解决您的问题。

Answer 4

对于 Angular 和 Spring Boot 应用程序，请查看my sample，并阅读我的doc。