Ajuda: Typescript + Springboot

Boa tarde, Estou tendo dificuldade pra carregar uma tela de edição de usuários, mais especificamente pra carregar os perfis, que são dinâmicos e apresentados como checkboxes. Eu tenho essa três entidades: Usuário: export class Usuario {

 id: number. nome: string. telefone: string. email: string. } **Perfil:**

export class Perfil {

 id: number. nome: string. } **UsuarioPerfil (tabela que relaciona quais perfis o usuário tem)**

export class UsuarioPerfil {

 id: number. idUsuario: number. idPerfil: number. } Inicialmente eu carrego todos os perfis da base e os apresento como checkboxes no trecho de ngOnInit abaixo. São apresentados assim no banco, por exemplo:

ID_USUARIO ID_PERFIL
98 8
98 9 Isso quer dizer que o usuário 98 tem os perfis de Usuario(8) e N1(9). Então eu gostaria de alguma maneira de, conforme eu for iterando os checkboxes no loop do html eu chamasse a função do spring passando so id do perfil e o id do usuário (98) e (caso voltasse ok do serviço (quando passar 8 e 9, que são os que existem), eu marcasse o checkbox como “checked”. Ou alguma outra solução mais adequada. Como eu poderia fazer isso? HTML:

<h3>Alterar Usuario</h3>
<div [hidden]="submitted" style="width: 400px. "> <form (ngSubmit)="onSubmit()"> <div class="form-group"> <label for="name">Nome</label> <input type="text" class="form-control" id="nome" required [(ngModel)]="usuario.nome" name="nome"> </div> <div class="form-group"> <label for="telefone">Telefone</label> <input type="text" class="form-control" id="telefone" required [(ngModel)]="usuario.telefone" name="telefone"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email" required [(ngModel)]="usuario.email" name="email"> </div> <h4>Perfis</h4> <table class="table table-striped"> <thead> </thead> <tbody> <tr *ngFor="let perfil of perfilData"> <input type='checkbox' id="perfil{{perfil.id}}" > {{perfil.nome}} </tr> </tbody> </table> <button type="submit" class="btn btn-success">Submit</button> </form>
</div> **TS:** import { Component, OnInit } from '@angular/core'. import { Usuario } from '../usuario'. import { ActivatedRoute, Router } from '@angular/router'. import { UsuarioService } from '../usuario.service'. import { PerfilService } from './../perfil.service'. import { Perfil } from "./../perfil". import { UsuarioPerfilService } from './../usuarioperfil.service'. 

@Component({

 selector: 'app-update-usuario', templateUrl: './update-usuario.component.html', styleUrls: ['./update-usuario.component.css']
})

export class UpdateUsuarioComponent implements OnInit {

 id: number. usuario: any. perfisservico: Observable<Perfil[]>. perfilData:any=[]. constructor(private route: ActivatedRoute,private router: Router, private usuarioService: UsuarioService, private perfilService: PerfilService, private usuarioperfilService: UsuarioPerfilService) { } ngOnInit() { this.usuario = new Usuario(). this.id = this.route.snapshot.params['id']. this.usuarioService.getUsuario(this.id).subscribe(data => { console.log(data) this.usuario = data. }, error => console.log(error)). this.perfilService.getPerfisList().subscribe(res=> { if (res) { this.perfisservico= res. this.perfilData = this.perfisservico. } }) } updateUsuario() { this.usuarioService.updateUsuario(this.id, this.usuario).subscribe(data => console.log(data), error => console.log(error)). this.usuario = new Usuario(). this.gotoList(). } onSubmit() { this.updateUsuario(). } gotoList() { this.router.navigate(['/usuarios']).then(() => { window.location.reload(). }). }
}