0
I’m new to Angular and I need to pass as parameter to the method "load Production" the employee of the time in my HTML ngFor, but I’m not succeeding, the console does not print anything in the console.log(producao1). How would be the correct way to pass this parameter to the method and after that be able to access the production attributes1?
@Component({
selector: 'app-conecta-lista-ggrupo',
templateUrl: './conecta-lista-ggrupo.component.html',
styleUrls: ['./conecta-lista-ggrupo.component.css']
})
export class ConectaListaGgrupoComponent implements OnInit {
gerenteId: string;
gerenteGrupo: GerenteGrupo = new GerenteGrupo();
gerenteGrupo1: GerenteGrupo[];
funcionarios : Funcionarios[];
funcis2: Funcionarios[];
producao1: Producao[];
producao2: Producao[];
producao2$: Observable<Producao[]>;
todaProducao: Producao[];
recebeTodaProducao: Producao;
contaProducao: number = 0;
funcis = new Array<Funcionarios>();
matricula: string;
virgula: string = ",";
gaugeType = "full";
gaugeValue = this.contaProducao;
gaugeValue1 = 10;
gaugeValue2 = 20;
gaugeValue3 = 30;
gaugeMax = 20;
gaugeLabel = "Processos orçados";
gaugeAppendText = "de 18";
gaugeSize = 200;
gaugeSize1 = 150;
gaugeCap = "round";
gaugeThick = 10;
thresholdConfig = {
'0': {color: 'red'},
'9': {color: 'orange'},
'16': {color: 'green'}
};
constructor(private conectaServiceService : ConectaServiceService,
private app: AppComponent,
private route: ActivatedRoute) {
this.gerenteId = this.route.snapshot.params['id'];
console.log(this.route);
}
ngOnInit() {
this.conectaServiceService.getListGerenteGrupoString(this.route.snapshot.params['id']).subscribe(gerenteGrupo=> {
this.gerenteGrupo = gerenteGrupo;
this.carregaFuncionarios(gerenteGrupo);
//this.gerenteGrupoParaArray(gerenteGrupo);
console.log("teste");
console.log(this.contaProducao);
});
//this.producao2$ = this.conectaServiceService.getListProducao();
//console.log("producao2$: " + this.producao2$);
//this.contaProducao = <HTMLInputElement>document.querySelector('#testaProducao');
//this.carregaProducao;
//this.contaProcessos;
//this.carregaTodaProducao2();
this.carregaTodaProducao();
//this.carregaProducao(this.funcionarios);
//console.log("producao2: " + this.producao2);
//this.gerenteGrupoParaArray();
this.adicionaFuncionarios;
this.paraArray;
//this.contaProducao = <HTMLInputElement>document.querySelector('#testaProducao');
//this.contaProducao = this.contaProcessos;
//this.acrescentaFuncionarios;
}
carregaGerenteSetorSelecionado(gerenteGrupo: GerenteGrupo){
this.conectaServiceService.getListGerenteGrupoSelecionado(gerenteGrupo).subscribe(
resposta => this.gerenteGrupo1 = resposta
)
}
carregaFuncionarios(gerenteGrupo: GerenteGrupo) {
console.log(gerenteGrupo);
//this.gerenteArea.id
this.conectaServiceService.getListFuncionariosPorGerenteGrupo(gerenteGrupo).subscribe(
resposta => this.funcionarios = resposta
)
}
novoFuncionario: Funcionarios = new Funcionarios();
carregaProducao(funcionarios: Funcionarios) {
//console.log(funcionarios);
this.conectaServiceService.getListProducaoPorFuncionario(funcionarios).subscribe(
resposta => this.producao1 = resposta
)
console.log("producao1: " + this.producao1);
}
My HTML:
<div class="container">
<div class="row">
<div class="col" *ngFor="let funcionario of funcionarios">
<div class="card border-secondary mb-3" style="width: 15rem;" [routerLink]="['//listaProducao/', funcionario.id]">
<!-- <ng-container *ngIf="producao2.filter(p.matricula === funcionario.matricula).length; let producoesCount"></ng-container>-->
<img style="width: 80px; height: 80px; margin-top: 10px; margin-right:10px;" class="rounded-circle" src="https://humanograma.intranet.bb.com.br/avatar/{{ funcionario.matricula }}">
<div class="card-body" >
<p class="card-title">{{ funcionario.nome.split(" ", 1) }}</p>
<p class="card-text-func-matricula">{{ funcionario.matricula }} </p>
<p class="card-text-func-matricula">{{ carregaProducao(funcionario)}} </p>
<!--<button (click)="carregaProducao(funcionarios)" class="btn btn-primary">Producao</button>-->
<div class="gauge" style="text-align: center">
<ngx-gauge [type]="gaugeType"
[value]="funcionarios.producao.length"
[max]="gaugeMax"
[label]="gaugeLabel"
[append]="gaugeAppendText"
[size] = "gaugeSize1"
[cap] = "gaugeCap"
[thick] = "gaugeThick"
[thresholds]="thresholdConfig">
</ngx-gauge>
</div>
</div>
</div>
</div>
</div>
</div>
My service:
getListFuncionariosPorGerenteGrupo(gerenteGrupo: GerenteGrupo){
return this.http.get<Funcionarios[]>(environment.apiPath + '/api/funcionarios/gerenteGrupo/' + gerenteGrupo.id)
}
getListProducaoPorFuncionario(funcionarios: Funcionarios){
return this.http.get<Producao[]>(environment.apiPath + '/api/producaoConecta/funcionarios/' + funcionarios.id)
}
But in the service signature is picking up the id of the employee to make the requisition, so in the service call you tbm have to pass an id of an employee.
– LeAndrade
In the service call, I pass an employee object as parameter, this object has the id property on it, which is passed in the API as employees.id. My JSON is returning with the correct data, but as employees is a multi-employee array, it returns me a production array and I need to pick up each employee’s production individually when it goes through ngFor.
– fernandesgm