在JHipster中展示一对多关系中的集合。

在JHipster中展示一对多关系中的集合，可以使用以下步骤和代码示例：

1. 创建实体类：首先，创建两个实体类，一个表示一的一方，另一个表示多的一方。例如，假设我们有一个实体类Book表示一的一方，和一个实体类Author表示多的一方。

   @Entity
   public class Book {
       @Id
       @GeneratedValue(strategy = GenerationType.IDENTITY)
       private Long id;
   
       private String title;
   
       // Getters and setters
   }
   

   @Entity
   public class Author {
       @Id
       @GeneratedValue(strategy = GenerationType.IDENTITY)
       private Long id;
   
       private String name;
   
       @OneToMany(mappedBy = "author")
       private Set<Book> books = new HashSet<>();
   
       // Getters and setters
   }
   

   在上述代码中，Author类中使用@OneToMany注解定义了一对多关系，并使用mappedBy属性指定了关系的反向属性。

2. 生成数据库表：运行JHipster生成实体类对应的数据库表。

   yo jhipster:entity Book
   yo jhipster:entity Author
   

3. 创建REST控制器：为每个实体类创建REST控制器，用于处理HTTP请求。

   @RestController
   @RequestMapping("/api")
   public class BookResource {
       private final BookRepository bookRepository;
   
       public BookResource(BookRepository bookRepository) {
           this.bookRepository = bookRepository;
       }
   
       @GetMapping("/books")
       public ResponseEntity<List<Book>> getAllBooks() {
           List<Book> books = bookRepository.findAll();
           return ResponseEntity.ok(books);
       }
   }
   

   @RestController
   @RequestMapping("/api")
   public class AuthorResource {
       private final AuthorRepository authorRepository;
   
       public AuthorResource(AuthorRepository authorRepository) {
           this.authorRepository = authorRepository;
       }
   
       @GetMapping("/authors")
       public ResponseEntity<List<Author>> getAllAuthors() {
           List<Author> authors = authorRepository.findAll();
           return ResponseEntity.ok(authors);
       }
   }
   

4. 创建前端视图：创建前端视图以显示一对多关系中的集合。

   • 在Angular项目的src/main/webapp/app/entities目录下，创建book和author目录。
   • 在book目录下创建book.component.ts和book.component.html文件。

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'jhi-book',
     templateUrl: './book.component.html'
   })
   export class BookComponent implements OnInit {
     books: any[];
   
     constructor(private http: HttpClient) {}
   
     ngOnInit(): void {
       this.http.get<any[]>('/api/books').subscribe(response => {
         this.books = response;
       });
     }
   }
   

   <h2>Books</h2>
   <ul>
     <li *ngFor="let book of books">
       {{ book.title }}
     </li>
   </ul>
   

   • 在author目录下创建author.component.ts和author.component.html文件。

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'jhi-author',
     templateUrl: './author.component.html'
   })
   export class AuthorComponent implements OnInit {
     authors: any[];
   
     constructor(private http: HttpClient) {}
   
     ngOnInit(): void {
       this.http.get<any[]>('/api/authors').subscribe(response => {
         this.authors = response;
       });
     }
   }
   

   <h2>Authors</h2>
   <ul>
     <li *ngFor="let author of authors">
       <h3>{{ author.name }}</h3>
       <ul>
         <li *ngFor="let book of author.books">
           {{ book.title }}
         </li>
       </ul>
     </li>
   </ul>
   

5. 配置路由：在src/main/webapp/app/entities目录下的index.ts文件中，添加路由配置。

   import { Routes } from '@angular/router';
   import { BookComponent } from './book/book.component';