为什么 ngFor 没有在浏览器上打印我从 Spring Boot 应用程序获得的语句或数据答案

【问题标题】：Why the ngFor in angular not printing the statements or data on browser that i am getting from my Spring Boot application为什么 ngFor 没有在浏览器上打印我从 Spring Boot 应用程序获得的语句或数据
【发布时间】：2022-11-06 21:37:33
【问题描述】：

在处理 SpringBoot 和角度连接时，我通过 JSON 的 getmapping 传递 getbooks 之类的数据，它正在 Spring 的服务器上打印，但是在使用服务 angular 将这些值传递给 angular 后，不会在服务器上打印数据。

#SpringBoot 控制器文件 -

 @RestController
    public class BookController {
        
    @Autowired
    BookService bookservice;
        
            @GetMapping("/")
            public String homePage() {
                return "This is home Page";
            }
        
            @GetMapping("/addBook")
            public String addBook(int id, String name, String author) {
                bookservice.addBook(Book.builder().id(id).name(name).author(author).build());
                return "Book Added";
        
            }
        
            @GetMapping("/deleteBook")
            public String deleteBook(int id) {
                bookservice.deleteBook(id);
                return "Book deleted";
            }
        
            @GetMapping("/getBooks")
            public String getAll() {
        
                Gson gson = new Gson();
                String json = gson.toJson(bookservice.getAll());
                return json;
            }
        
        }
    
    
    #SpringBoot service file -
    




 @Service
        public class BookService {
            
            @Autowired
            BookRepo repo;
        
            public void addBook(Book book) {
                repo.save(book);
                repo.flush();
            }
            public List<Book> getAll(){
                return repo.findAll();
            }
            public void deleteBook(int id) {
                
                repo.delete(Book.builder().id(id).build());
            }
            
            
        }
    
    #Angular service.ts-
    




import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    
    @Injectable({
      providedIn: 'root'
    })
    export class BookService {
    
      constructor(private http : HttpClient) { }
    
    getAll(){
      return this.http.get<any>("http://localhost:8080/getBooks");
    }
    addBook(user:any){
      return this.http.get("http://localhost:8080/addBook?id="+ user.id + "&name=" +user.name + "&author="+user.author);
    }
    deleteBook(id:any){
      return this.http.get("http://localhost:8080/deleteBook?id="+id);
    }
    }
    
    #appComponent.ts -

书籍：任何；

  constructor(private service:BookService) {}

  ngOnInit():void{
    this.loadData();
  }

  loadData():void {
    this.service.getAll().subscribe(response => {
      this.books = response;
      console.log(this.books);
    })
  }

#appComponent.html -



<p *ngFor="let temp in books">
    {{temp.name}} -- {{temp.author}}
</p>

【问题讨论】：

标签： java angular spring spring-boot

【解决方案1】：

这里我们应该使用*ngFor="let temp of books"，而不是使用*ngFor="let temp in books"。请使用下面的sn-p：

<p *ngFor="let temp of books">
    {{temp.name}} -- {{temp.author}}
</p>

如果我们在 this.books 属性中正确获取数据，这可以解决您的问题。希望这可以帮助。

【讨论】：

仍然无法工作问题未解决

【解决方案2】：

使用 Observable 错误块查看您是否收到任何错误 API 或检查响应格式。
您的 API 向前端返回一个字符串值，您需要删除 API 以返回 List<> 或使用 JSON.parse(this.books) 将响应转换为 Array。
在 *ngFor 中使用“of”而不是“in”。

检查组件声明的模块中“CommonModule”的可用性。

@GetMapping("/getBooks")
public List<Books> getAll() {

    return bookservice.getAll();
}

constructor(private service:BookService) {}

 ngOnInit():void{
   this.loadData();
 }

 loadData():void {
   this.service.getAll().subscribe(response => {
     this.books = response;
     console.log(this.books);
   },error=>{
     console.log(error)
   })
 }

#appComponent.html -


<p *ngFor="let temp of books">
    {{temp.name}} -- {{temp.author}}
</p>

【讨论】：