Arquivo Discussoes de Programacao e Tecnologia Então, como faço para testar no OffsetDateTime no postman: o objeto é o que segue abaixo:
{
"descricao": "Desenvolver as interfaces CRUD cadastro de clientes",
"status": "ESPERA",
"prioridade": "MÉDIA",
"dataCadastro": "2021-06-26T18:28:54.403+00:00",
"dataPrevista": "2021-06-26T18:28:54.403+00:00",
"dataConclusao": "2021-06-26T18:28:54.403+00:00",
"funcionario": {
"id": 1
}
}
Vc quer testar usando o recurso de teste do postman mesmo? E o que vc quer testar nessa data?
Isso Lucas: basicamente os outros atributos funcionam, mas as datas não sei qual formato!
Tenta com esse formato: 2007-12-03T10:15:30+01:00
FONTE: Class OffsetDateTime
Boa noite amigo: estou na parte do front-end tentando recuperar os dados de um formulario abaixo:
<div class="container col-md-10">
<div class="card">
<div class="card-header">
<h4>Cadastrar Atividades</h4>
</div>
<div class="card-body">
<form action="">
<div class="form-group">
<label for="">DESCRIÇÃO</label>
<input #descricao type="text" class="form-control" style="background-color: lightblue;">
</div>
<br>
<br>
<div class="form-group">
<label for="selectStatus">STATUS</label>
<select #status class="form-control" id="idStatus" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>AGENDADA</option>
<option>EM ANDAMENTO</option>
<option>CONCLUIDA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectPrioridade">PRIORIDADE</label>
<select #prioridade class="form-control" id="idPrioridade" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>ALTA</option>
<option>MEDIA</option>
<option>BAIXA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectFuncionario">FUNCIONÁRIO</label>
<select #funcionario.nome class="form-control" id="idFuncionario" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>Pompeo Cesar da Silva</option>
<option>Alexandrovina</option>
<option>Catarina</option>
</select>
</div>
<br>
<br>
<!--<label for="dataPrevista">DATA PREVISTA</label>
<div class="form-group">
<input #dataPrevista type="date" id="dataPrevista" name="dataPrevista" ng-model="example.value"
placeholder="yyyy-MM-dd hh:mm" min="2013-01-01" max="2030-12-31" required style="background-color: lightblue;"/>
</div>-->
<div class="botao">
<button (click)="Cadastrar(atividade)" class="btn btn-danger">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
Porém: a pergunta é como recuperar Atividade nesse componente angular abaixo?
import { HttpResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Atividade } from 'src/app/Modelo/Atividade';
import { ServiceService } from 'src/app/Service/service.service';
import { Funcionario } from 'src/app/Modelo/Funcionario';
@Component({
selector: 'app-adicionar',
templateUrl: './adicionar.component.html',
styleUrls: ['./adicionar.component.css']
})
export class AdicionarComponent implements OnInit {
atividade:Atividade;
constructor(private router:Router, private service:ServiceService) {}
ngOnInit(): void {
}
Cadastrar(atividade:Atividade){
this.service.createAtividade(atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
this.router.navigate(["listar"]);
})
}
}
Como recupero uma atividade com esse modelo?
No spring sai: Required request body is missing:
Parece que está faltando vc configurar o form. Veja essa resposta aqui mesmo do GUJ: Erro angular 8 *ngForm
Do nada, tu mudou de dúvida. Conseguiu resolver o problema do OffsetDateTime?
A duvida do OffsetTime não: mas talves se conseguir inserir uma atividade, consigo cadastrar junto a data:
Entendi. O formato que passei, não deu certo de usar no postman não?
Não tentei: eu preciso cadastrar uma atividade: depois cadastrar uma atividade com data: a parte do spring está pronta: eu ja consegui que a interface angular liste as atividades que cadastrei pelo postman: Porém: não consigo implementar o cadastro para cadastrar: quando tento cadastrar uma atividade pela interface que construi, a mensagem do spring é: No spring sai: Required request body is missing: = deduso dai que é um problema de construir uma atividade: não sei como instanciar a atividade no AdicionarModulo e recuperar os atributos no componente.html
Veja o link que mandei referente ao form em angular. Supondo que vc vá usar template-driven forms, vc deve usar ngModel nos inputs do form indicando a propriedade que será preenchida no objeto. E esse objeto que será preenchido será o que vc irá enviar no requisição http que será recebida pelo endpoint criado no spring.
Então, já tentei de tudo, não consigo, não funciona!
O componente está assim:
import { HttpResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup} from '@angular/forms';
import { FormBuilder } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { FormControl } from '@angular/forms';
import { Atividade } from 'src/app/Modelo/Atividade';
import { ServiceService } from 'src/app/Service/service.service';
import { Funcionario } from 'src/app/Modelo/Funcionario';
@Component({
selector: 'app-adicionar',
templateUrl: './adicionar.component.html',
styleUrls: ['./adicionar.component.css']
})
export class AdicionarComponent implements OnInit {
atividade:Atividade;
formulario:FormGroup;
constructor(private formBuilder:FormBuilder, private router:Router, private service:ServiceService) {
}
ngOnInit(): void {
this.formulario = this.formBuilder.group({
descricao: [null],
status: [null],
prioridade: [null],
funcionario: [null]
//dataNascimento: new FormControl(cliente.dataNascimento),
})
}
OnSubmit(){
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
this.router.navigate(["listar"]);
console.log(this.formulario.value);
//this.formAtividade.reset(this.atividade);
})
}
}
Já a o html:
<div class="container col-md-10">
<div class="card">
<div class="card-header">
<h4>Cadastrar Atividades</h4>
</div>
<div class="card-body">
<form class="form-horizontal" [formGroup]="formulario" (ngSubmit)="OnSubmit()">
<div class="form-group">
<label for="" class="control-label" >DESCRIÇÃO</label>
<input type="text" id="descricao" formControl="descricao" class="form-control"
style="background-color: lightblue;">
</div>
<br>
<br>
<div class="form-group">formControlName
<label for="selectStatus">STATUS</label>
<select required class="form-control" id="status" formControl="status" formControlName="status" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>AGENDADA</option>
<option>EM ANDAMENTO</option>
<option>CONCLUIDA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectPrioridade">PRIORIDADE</label>
<select id="prioridade" formControl="prioridade" required class="form-control" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>ALTA</option>
<option>MEDIA</option>
<option>BAIXA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectFuncionario">FUNCIONÁRIO</label>
<select id="funcionario" formControl="funcionario" required class="form-control" id="idFuncionario" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>Pompeo Cesar da Silva</option>
<option>Alexandrovina</option>
<option>Catarina</option>
</select>
</div>
<br>
<br>
<!--<label for="dataPrevista">DATA PREVISTA</label>
<div class="form-group">
<input #dataPrevista type="date" id="dataPrevista" name="dataPrevista" ng-model="example.value"
placeholder="yyyy-MM-dd hh:mm" min="2013-01-01" max="2030-12-31" required style="background-color: lightblue;"/>
</div>-->
<div class="botao">
<button type="submit" class="btn btn-primary">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
Acho que os formControl nos inputs estão errados:
Mude de:
formControl="prioridade"
para:
[(formControl)]="prioridade"
Vou tentar:::::::: Como faço para testar ver se a atividade recebe os atributos: estou usando o mozila e o metodo: console.log() mas não sei onde visalizar a saída
Com o console.log, tu vê a saída no console do navegador (F12). Outra forma, seria usar o depurador, ou colocando o breakpoint pelo console do navegador ou usando a palavra-chave debugger na linha que vc quer que pare (só funciona com o console do navegador aberto).
Tenteti de tudo: não tem um exemplo completo:
Seguindo aquele exemplo que você postou: a teg que não funciona é essa:
[formGroup]
dessa parte
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
Nessa parte:
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
Vc está enviando o this.atividade, porém o seu form está sendo preenchido em formulario. Desse jeito, sempre será enviado um valor vazio. Vc deve preencher a variável atividade com os dados da variável formulario (que estará preenchida com os dados do formulário do html).
Tente assim:
this.atividade = this.formulario.value;
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
Ou vc pode passar o formulário direto na requisição.
Agora consegui compila tudo, falta só isso: adicionar o formulario, para a atividade:
O ultimo atributo de atividade é um funcionario, que tem id, nome e cpf: nesse caso o que vem do selectbox é uma string, isso da um erro: como posso dar um system.outprintln() e visualizae esses dados: estou usando o visual studio code?
onSubmit(){
//let funcionario =new Funcionario();
//this.funcionario.id=1;
let atividade = new Atividade();
this.atividade.funcionario.id=1;
//this.funcionario.id=1;
//this.funcionario.nome = this.formulario.controls.funcionario.value;
//this.atividade.funcionario = this.funcionario;
this.atividade.descricao = this.formulario.controls.descricao.value;
this.atividade.status = this.formulario.controls.status.value;
this.atividade.prioridade = this.formulario.controls.prioridade.value;
this.atividade.funcionario.nome = this.formulario.controls.funcionario.value;
// this.atividade.funcionario.id=1;*/
//this.atividade.funcionario.id = 1;
//this.atividade = this.formulario.value;
//this.atividade.funcionario = this.funcionario;
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
this.router.navigate(["listar"]);
console.warn(this.formulario.value);
//this.formAtividade.reset(this.atividade);
})```
Tem que usar o console.log e ver no console do navegador.
Nesse caso, vc pode passar apenas o id do funcionário na requisição é tratar isso no backend (por exemplo, recuperando o funcionário do banco usando esse ID recebido).
Não consegui o front-end: vou voltar para postman e tentar inserir a data
Aquela data que você me passou preci de aspas simples ou duplas?
Consegui cadastrar as datas o back-end, esta perfeito
Pelo postman ou pela tela da aplicação?
pelo postmam!
Estou tendo problema na interface com com a tag: [formGroup]: a unica forma de recuperar uma atividade do html abaixo e enviar para component é através dessas tag angular, ou tem outra forma?
<div class="container col-md-10">
<div class="card">
<div class="card-header">
<h4>Cadastrar Atividades</h4>
</div>
<div class="card-body">
<form action="" [formGroup]="formulario">
<div class="form-row">
<div class="form-group">
<label for="">DESCRIÇÃO</label>
<input id="descricao" type="text" class="form-control" style="background-color: lightblue;">
</div>
<br>
<br>
<div class="form-group">
<label for="selectStatus">STATUS</label>
<select class="form-control" id="status" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>AGENDADA</option>
<option>EM ANDAMENTO</option>
<option>CONCLUIDA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectPrioridade">PRIORIDADE</label>
<select class="form-control" id="prioridade" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>ALTA</option>
<option>MEDIA</option>
<option>BAIXA</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="selectFuncionario">FUNCIONÁRIO</label>
<select class="form-control" id="funcionario" style="background-color: lightblue;">
<option selected>SELECIONE</option>
<option>Pompeo Cesar da Silva</option>
<option>Alexandrovina</option>
<option>Catarina</option>
</select>
</div>
<br>
<br>
<div class="form-group">
<label for="dataPrevista">DATA PREVISTA</label>
<input type="date" id="dataPrevista" value="2018-03-17 00:00:"
placeholder="yyyy-MM-dd hh:mm" min="2013-01-01" max="2030-12-31" required style="background-color: lightblue;"/>
</div>
<div class="botao">
<button type="submit" class="btn btn-primary">Cadastrar</button>
<!--<button (click)="Adicionar(atividade)" class="btn btn-danger">Cadastrar</button>-->
</div>
</div>
</form>
</div>
</div>
</div>
Como tinha postado, o angular te fornece 2 formas de tratar um form (dê uma lida no link que mandei antes). Dessa forma que vc fez é usando formGroup junto com formControl para cada item do formulário. A outra forma é usando o ngModel. Para seu caso, acho que o ngModel será mais simples de resolver seu problema.
Supondo que tenha um campo que preencha a descrição da atividade:
<input type="text" [(ngModel)]="atividade.descricao" />
As teg consegui dominar!
Agora surgiu uma ambiguidade do controler: como se resolve esse mapeamento: Preciso preencher o selectbox com nome dos funcionarios: para cadadastrar quem fez a atividade?
@GetMapping
public List<Funcionario> listar() {
return fs.listar();
}
@GetMapping
public List<String> getListNameFuncionarios(){
return fs.getListNameFuncionarios();
}```
Só uma observação: o correto é tag, e não teg.
Sobre o controller, vc pode ter apenas o que retorna a lista de Funcionario, pois vc poderá obter a propriedade nome de cada elemento retornado.
Agora, se vc realmente quiser ter um que retorne somente os nomes, vc deve definir uma URL diferente, ex.:
@GetMapping("/nomes")
public List<String> getListNameFuncionarios(){
return fs.getListNameFuncionarios();
}
Verdade obrigado!
Nesse caso, referente ao serviço: como defino ServiceService, da para criar mais de um url, ou tem que criar outra classe de serviços:
export class ServiceService {
constructor(private http:HttpClient) { }
url='http://localhost:8080/atividades';
url='http://localhost:8080/funcionarios/nomes';
getAtividades(){
return this.http.get<Atividade[]>(this.url);
}```
Eu gosto de separar por escopo. Criaria um AtividadeService e um FuncionarioService (sem falar que ServiceService é um nome bem estranho).
export class AtividadeService {
url = 'http://localhost:8080/atividades';
constructor(private http:HttpClient) { }
getAtividades(){
return this.http.get<Atividade[]>(this.url);
}
}
export class FuncionarioService {
url = 'http://localhost:8080/funcionarios/nomes';
constructor(private http:HttpClient) { }
getNomesFuncionarios() {
return this.http.get<string[]>(this.url);
}
}
Não estou sabendo encontrar o tal de console para visualizar, o retorno do meto console.log(): como faço para visualizar a saida desse metodo?
Ao apertar F12 no navegador, deve aparecer isso:
Depois só ir na aba console.
Dê uma olhada depois nesse link: https://developer.chrome.com/docs/devtools/overview/
No meu caso o console não apresenta nada utiizo o mozila!
Precisa testar ve se a conexão tras os nomes?
O primeiro array é preenchido pelo funcionario.service no metodo: RetornaFuncionarios() e não preenche o selectbox:::::: precisaria verificar o array preenchido com funcionario.service
O segundo array preenchido com os nomes, carrega o selectbox
@Component({
selector: 'app-adicionar',
templateUrl: './adicionar.component.html',
styleUrls: ['./adicionar.component.css']
})
export class AdicionarComponent implements OnInit {
nomeDosFuncionarios:String[];
nomeDosFuncionarios:String[] = ["paula","maria","joao"];
atividade:Atividade;
RetornaFuncionarios(){
this.funcionarioService.getNomeFuncionarios().subscribe(data=>{this.nomeDosFuncionarios=data;})
}```
Vish: tem alguns erros ve se pode me ajudar: primeiro, deveria ter uma forma de pegar os atributos individuais, como abaixo: porém, a única forma que consegue chegar no spring e lançar uma exceção é a primeira linha aquela que você me enviou: preciso disso poque o nome dos funcionários estão no selectbox, e é preciso pegar esse nome, e lá no spring com esse nome eu pego o funcionario para inserir na atividade e dai cadastrar a atividade:
OnSubmit(){
this.atividade = this.formulario.value;
/*this.atividade.descricao = this.formulario['descricao'].value
this.atividade.status = this.formulario['status'].value
this.atividade.prioridade = this.formulario['prioridade'].value
this.atividade.funcionario.nome = this.formulario['funcionario'].value
this.atividade.dataPrevista = this.formulario['dataPrevista'].value*/
//console.warn(this.formulario.value);
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
this.router.navigate(["listar"]);
// console.warn(this.formulario.value);
//this.formAtividade.reset(this.atividade);
})
}
Essa ferramenta que tem no chrome, tb tem uma equivalente no mozilla (e vc acessa da mesma forma, usando F12).
Seria bom, para ver se está funcionando e retornando os dados corretamente.
nomeDosFuncionarios:String[];
nomeDosFuncionarios:String[] = ["paula","maria","joao"];
Acho que vc não pode ter duas propriedades no componente com o mesmo nome não.
Uma coisa, como é a estrutura do json que tem que passar para o backend?
Estou usando o crome e aprendi verificar, na verdade o problema é o funcionaio porque é um objeto: resolvi o problema criando um funcionario e adicionando a atividade, agora falta pegar o value do NGvalue e passar para o nome do funcionario: como faço para pegar esse valor:
<div class="form-group">
<label for="selectFuncionario">FUNCIONÁRIO</label>
<select class="form-control" id="funcionario" formControlName="funcionario" style="background-color: lightblue;">
<option *ngFor="let funcionario of nomeDosFuncionarios" [ngValue]="funcionario">
{{ funcionario}}
<!-- <option selected>SELECIONE</option>
<option>Pompeo Cesar da Silva</option>
<option>Alexandrovina</option>
<option>Catarina</option>-->
</option>
</select>
</div>
Funcionario:
constructor(private funcionarioService: FuncionarioService, private formBuilder:FormBuilder, private service:ServiceService, private router: Router) {
this.RetornaFuncionarios();
this.funcio = new Funcionario;
this.funcio.id=1
this.funcio.cpf='';
this.funcio.nome='';
this.funcio.cargo='';
}
Aqui preciso pegar o value, mas nada que faço funciona:
OnSubmit(){
this.atividade = this.formulario.value;
this.funcio.nome = this.atividade.funcionario.nome;
this.atividade.funcionario = this.funcio;
/*this.atividade.descricao = this.formulario.getRawValue().descricao
this.atividade.status = this.formulario.value['status']
this.atividade.prioridade = this.formulario.value['prioridade']
this.atividade.funcionario.nome = this.formulario.value['funcionario']
this.atividade.dataPrevista = this.formulario.value['dataPrevista']*/
console.log(this.formulario.value);
Então Lucas: consegui fazer cadasstrar e listar: o problema agora é o seguinte: adicionar a lista de nomes no selectbox: a lista está vindo assim:
["Pompeo Cesar da Silva","Aristoteles Floriano Canani","Arquimedes Medievali","Confucio Tanaka"]
estou listando no método:
RetornaFuncionarios(){
this.funcionarioService.getNomeFuncionarios().subscribe(data=> {this.nomeDosFuncionarios=data;});
console.log(this.funcionarioService);
}
eu acho que tem haver com o formato do metodo:
this.http.get<String[]>(this.url)
e do atributo que recebe esse metoto:
nomeDosFuncionarios:String[];
//nomeDosFuncionarios:String[] = ["Pompeo Cesar da Silva","maria","joao"];
Que está na componente:
import { ServiceService } from '../../Service/service.service';
import { FuncionarioService } from '../../Service/funcionario.service';
import { Atividade } from 'src/app/Modelo/Atividade';
import { Funcionario } from 'src/app/Modelo/Funcionario';
import { Observable } from 'rxjs';
@Component({
selector: 'app-adicionar',
templateUrl: './adicionar.component.html',
styleUrls: ['./adicionar.component.css']
})
export class AdicionarComponent implements OnInit {
Vc não deveria está usando o nome do funcionário assim. O nome é um dado fraco para ser usado na identificação de algum registro. O melhor seria usar um ID. Assim, vc poderia retornar a lista de funcionários do endpoint e usar o ID como valor na combobox e o nome como label.
Na verdade eu seleciono o nome do funcionario no selectbox e envio para spring, no spring com o nome do funcionario eu busco u funcionário todo ai eu adiciono o funcionario na atividade e cadastro a atividade:
sabe uma solução para o selectbox receber esses nomes?
Se tiver 2 funcionarios com mesmo nome?
Tente assim:
<select [(ngModel)]="atividade.nomeSelecionado">
<option *ngFor="let nome of nomesFuncionarios" [ngValue]="nome">{{nome}}</option>
</select>
Altere para usar formControl em vez de ngModel.
O meu está assim ó, quando eu uso o array preenchido ele funciona, quando uso o outro array que tras os nomes ele não funciona:
//nomeDosFuncionarios:String[];
nomeDosFuncionarios:String[] = ["Pompeo Cesar da Silva","maria","joao"];
O meu selectbox está assim: você consegue usar as minhas variaveis pra ficar mais óbvio:
<select class="form-control" id="funcionario" formControlName="funcionario" style="background-color: lightblue;">
<option *ngFor="let funcionario of nomeDosFuncionarios" [ngValue]="funcionario">
{{ funcionario}}
</option>
</select>
O array está sendo preenchido assim: por isso penso que tem erro entre <String[]> e String[] :
RetornaFuncionarios(){
this.funcionarioService.getNomeFuncionarios().subscribe(data=> {this.nomeDosFuncionarios=data;});
console.log(this.funcionarioService);
}
E desse jeito não tah funcionando? Da algum erro?
Quando uso o debaixo funciona, quando uso o de cima não
//nomeDosFuncionarios:String[];
nomeDosFuncionarios:String[] = ["Pompeo Cesar da Silva","maria","joao"];
Onde vc está chamando a função RetornaFuncionarios da classe ServiceService?
O array está sendo preenchido assim: por isso penso que tem erro entre <String[]> e String[] :
RetornaFuncionarios(){
this.funcionarioService.getNomeFuncionarios().subscribe(data=> {this.nomeDosFuncionarios=data;});
console.log(this.funcionarioService);
}
Mas quem tah chamando RetornaFuncionarios? Ou RetornaFuncionarios é uma função que está declarada no próprio componente?
Está no componente:
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ServiceService } from '../../Service/service.service';
import { FuncionarioService } from '../../Service/funcionario.service';
import { Atividade } from 'src/app/Modelo/Atividade';
import { Funcionario } from 'src/app/Modelo/Funcionario';
import { Observable } from 'rxjs';
@Component({
selector: 'app-adicionar',
templateUrl: './adicionar.component.html',
styleUrls: ['./adicionar.component.css']
})
export class AdicionarComponent implements OnInit {
nomeDosFuncionarios:String[];
//nomeDosFuncionarios:String[] = ["Pompeo Cesar da Silva","maria","joao"];
funcio:Funcionario;
atividade:Atividade;
constructor(private funcionarioService: FuncionarioService, private formBuilder:FormBuilder, private service:ServiceService, private router: Router) {
this.RetornaFuncionarios();
this.funcio = new Funcionario;
this.funcio.id=1
this.funcio.cpf='';
this.funcio.nome='';
this.funcio.cargo='';
}
formulario: any = FormGroup;
ngOnInit(): void {
this.formulario = this.formBuilder.group({
descricao: [''],
status: [''],
prioridade: [''],
funcionario: [''],
dataPrevista: [new Date]
});
}
RetornaFuncionarios(){
this.funcionarioService.getNomeFuncionarios().subscribe(data=> {this.nomeDosFuncionarios=data;});
console.log(this.funcionarioService);
}
OnSubmit(){
this.funcio.nome = this.formulario.get('funcionario').value
this.atividade = this.formulario.value;
this.atividade.funcionario = this.funcio;
console.log(this.atividade);
this.service.createAtividade(this.atividade)
.subscribe(data=>{alert("Se agrego com exito...!!!");
this.router.navigate(["listar"]);
console.log(this.atividade);
this.formulario.reset(this.atividade);
})
}
Mude a função para ficar assim:
RetornaFuncionarios() {
this.funcionarioService.getNomeFuncionarios().subscribe(data => {
console.log(data);
this.nomeDosFuncionarios = data;
});
}
E veja o que é impresso no console.
Não funcionou: selectbox vazio:
Ah rapaz, o problema é o CORS. Vc tem que permitir o backend receber requisições de outro dominio.
Por exemplo, o dominio http://localhost:8080 é diferente de http://localhost:3000.
Faça um teste, coloque a anotação @CrossOrigin no método do endpoint, e tente de novo.
Viu como é importante o console? Ele é uma ferramenta muito importante quando trabalhar no frontend.
Seria isso?
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Funcionario } from '../Modelo/Funcionario';
@Injectable({
providedIn: 'root'
})
export class FuncionarioService {
constructor(private http:HttpClient) { }
url='http://localhost:8080/funcionarios/nomes';
createAtividade(funcionario:Funcionario){
return this.http.post<Funcionario>(this.url,funcionario);
}
@CrossOrigin
getNomeFuncionarios(){
return this.http.get<String[]>(this.url);
}
//getNomeFuncionarios(){
//return this.http.get<String[]>(this.url);
// }
}
Nâo. A anotação @CrossOrigin tem que ser colocada lah no projeto spring.
No controler está assim:
package com.petter.tasks.api.controller;
import java.util.List;
import javax.validation.Valid;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestController;
import com.petter.tasks.domain.exception.CadastroFuncionarioException;
import com.petter.tasks.domain.model.Atividade;
import com.petter.tasks.domain.model.Funcionario;
import com.petter.tasks.domain.service.AtividadeService;
import com.petter.tasks.domain.service.FuncionarioService;
import lombok.AllArgsConstructor;
@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
@AllArgsConstructor
@RestController
@RequestMapping("/atividades")
public class AtividadeController {
private AtividadeService as;
//////////////////LISTA TODAS AS ATIVIDADES
@GetMapping
public List<Atividade> listar() {
System.out.println("chegou aui");
return as.listar();
}
```
Desse jeito acho que resolve. (poderia ser soh @CrossOrigin também)
Pelo que pesquisei acho que tem haver
com: import { Observable } from ‘rxjs’;
Esse erro tem a ver com CORS, que é uma política de segurança do protocolo HTTP. Se o servidor não liberar, requisições vindas de outros domínios não serão processadas. Com isso, o servidor tem que permitir.
O erro é esse:
Olha o erro e veja essa parte:
has been blocked by CORS policy
Tu tem que habilitar o CORS no backend (spring).
Mas como disse se clicar no link::: 'http://localhost:8080/funcionarios/nomes aparace a tela abaixo
É diferente. Acessar pelo navegador é diferente de acessar por uma aplicação rodando num servidor http.
Nesse caso cliquei em cima desse link
Tente colocar o @CrossOrigin no método onde o endpoint é declarado, e teste novamente.
Ou poderia ser: a url
export class FuncionarioService {
constructor(private http:HttpClient) { }
url='http://localhost:8080/funcionarios/nomes';
createAtividade(funcionario:Funcionario){
return this.http.post<Funcionario>(this.url,funcionario);
}
Eu sou burro:
Neh não sô. Só tente adicionar o @CrossOrigin no método e tente de novo.
@CrossOrigin
@GetMapping
public List<Atividade> listar() {
System.out.println("chegou aui");
return as.listar();
}
Mas adicione isso no método que retorna os nomes dos funcionários.
Tinha esquecido de colocar em cima do ControlerFuncionario
@CrossOrigin(origins = “http://localhost:4200”, maxAge = 3600)
Agora funcionaou
Obrigado Lucas: só mais um detale: a respeito do delete como defino esse metodo:
removeAtividade(atividadeDelete:Atividade){
return this.http.delete<Atividade>(this.url,atividadeDelete.id);
}
A url parece está correta. Não está funcionando? Dá algum erro?
Essa variavel fica sublinhada com o inform:
o overload matches this call.
Overload 1 of 15, ‘(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: “events”; context?: HttpContext | undefined; params?: HttpParams | { …; } | undefined; reportProgress?: boolean | undefined; responseType?: “json” | undefined; withCredentials?: boolean | undefined; }): Observable<…>’, gave the following error.
Argument of type ‘number’ is not assignable to parameter of type ‘{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: “events”; context?: HttpContext | undefined; params?: HttpParams | { …; } | undefined; reportProgress?: boolean | undefined; responseType?: “json” | undefined; withCredentials?: boolean | undefined; }’.
Ah sim, a função delete está sendo chamada do jeito errado. O segundo parâmetro é outra coisa.
Como está a URL do endpoint que realiza o delete?
Assim:
///////////////EXCLUI AS ATIVIDADES////////////////////////////////////
@DeleteMapping("/{atividadeId}")
public ResponseEntity<Void> remover(@PathVariable Long atividadeId) {
if(!as.existsById(atividadeId)) {
return ResponseEntity.notFound().build();
}
as.excluir(atividadeId);
return ResponseEntity.noContent().build();
//return cr.findById(clienteId).map(ResponseEntity::ok).orElse(ResponseEntity.notFound().build());
}
}
Então vc deve chamar mais ou menos assim:
return this.http.delete<Atividade>(this.url + "/" + atividadeDelete.id);
Valeu lucas Obrigado!
Deu certo?
O delete ainda não!