Angular 5 : select all users with related role OneToMany Relationship

问题

I'm trying to select all users with related role, knowing that one role can be related to many contacts and one contact has one role.

i tried the code bellow but it return just a blank table, is it a problem with hibernate or with how i called the company name column ?

ContactRepository.java

@Query("SELECT c, cmp.name FROM Contact c, Company cmp WHERE c.company=cmp.id")
public Page<Contact> search(Pageable page);

ContactRestService

 @RequestMapping(value="/searchContacts", method=RequestMethod.GET)
    @ResponseBody
    public Page<Contact> search(
            @RequestParam(name="page",defaultValue="0") int page,
            @RequestParam(name="size",defaultValue="5") int size){
        return contactRepository.search(PageRequest.of(page, size));    
    }

contacts.component.html

<tr *ngFor="let c of pageContacts?.content">
    <td class="py-1">
        <img src="../../assets/images/faces-clipart/pic-1.png" alt="image"/>
    </td>
    <td>{{c.email}}</td>
    <td>{{c.phone}}</td>
    <td>{{c.firstName}}</td>
    <td>{{c.lastName}}</td>
    <td>{{c.job}}</td>
    <td>{{c.birthday}}</td>
    <td>{{c.company.name}}</td>
</tr>

contact.service.ts

@Injectable()
export class ContactsService {

  constructor(private http:HttpClient){}

  getContacts(){
    return this.http.get("http://localhost:8080/searchContacts?page=0&size=6")
  }

}

contacts.component.ts

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css']
})
export class ContactsComponent implements OnInit {

  pageContacts:any;
  constructor(private contactsService:ContactsService) { }

  ngOnInit() {
    console.log("Initialisation......");
    this.contactsService.getContacts()
      .subscribe(data =>{
        console.log(data);
        this.pageContacts=data;
      }, err=>{
      console.log("ALERT!!!!!"+err);
      })
  }

}

回答1:

In fact the response is an array so it works when i changed my code to this :

<tr *ngFor="let c of pageContacts?.content">
    <td class="py-1">
        <img src="../../assets/images/faces-clipart/pic-1.png" alt="image"/>
    </td>
    <td>{{c[0].email}}</td>
    <td>{{c[0].phone}}</td>
    <td>{{c[0].firstName}}</td>
    <td>{{c[0].lastName}}</td>
    <td>{{c[0].job}}</td>
    <td>{{c[0].birthday}}</td>
    <td>{{c[1]}}</td>
</tr>

来源：https://stackoverflow.com/questions/50918156/angular-5-select-all-users-with-related-role-onetomany-relationship

标签

hibernate

typescript

spring-boot

angular5