Ajuda: Typescript + Springboot

[seres 0]

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