Ajuda: Typescript + Springboot

Front-end JavaScript
#1

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. Eles são apresentados assim na tela:
Capturar

E assim no banco:

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

Existe.

Você precisa lembrar que orientação a objetos te dá uma gama maior de opções. Uma delas, inclusive, pode resolver esse problema de maneira bem simples.
Veja, você não tem que reproduzir cada tabela como sendo uma classe isolada (Usuario, Perfil e UsuarioPerfil). Você pode ter só as classes Usuario e Perfil, mais ou menos assim:

export class Perfil {
    id: number;
    nome: string;
}

export class Usuario {
    id: number;
    nome: string;
    telefone: string;
    email: string;
    perfis: Array<Perfil>;
}

Assim, ao associar um perfil a um usuário, você só insere esse perfil no array correspondente. Caso remova um perfil, basta excluir deste array.