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();
 });
 }
}