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