[英]Unable to display list of elements using *ngFor in Angular + Spring Boot project
Here is the html part:这是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 file 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 file service.ts 文件
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.当我使用内置的 JPA 存储库时,它工作正常,但是当我根据要求切换到自定义查询时,它似乎不起作用。
This is the API response这是 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]]
You are getting the response in an array and trying to iterate using keys, try to iterate using the index.您正在获取数组中的响应并尝试使用键进行迭代,尝试使用索引进行迭代。
From the API response, I can say that the object is not a key-value pair and it's just nested string arrays.从 API 响应中,我可以说该对象不是键值对,它只是嵌套的字符串数组。 You need to change the object for the ngFor something like below.
您需要更改 ngFor 的对象,如下所示。
app.component.ts 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.您可以创建一个名为
Test
的类,您可以操作您的数据,一旦完成,您可以 ngFor 它来显示数据。
app.component.html应用程序组件.html
<div *ngFor="let actualobj of testActualObject">
ID: {{actualobj.test_id}} <br />
testName: {{actualobj.test_name}}
</div>
Here is the Stackblitz link .这是 Stackblitz 链接。
Hope this resolved your issue.希望这解决了您的问题。
In your case, the result returns List<Object[]>
:在您的情况下,结果返回
List<Object[]>
:
entityManager.createNativeQuery("select * from test")
.getResultList()
just add resultClass
param to createNativeQuery()
:只需将
resultClass
参数添加到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
当我使用内置的 JPA 存储库时,它工作正常,但是当我根据要求切换到自定义查询时,它似乎不起作用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.