Estou tentando passar a quantidade de elementos de um array para uma variável em TypeScript que alimentará a propriedade de valor de um Gauge(velocímetro). Testei colocar a chamada do método que faria essa contagem de elementos no html para quando ele percorresse cada funcionário, passasse o funcionário da vez como parâmetro e retornasse array.lenght, porém no console não imprime o valor do atributo que receberia o tamanho do array (a variável contaProducao). Preciso pegar o tamanho do array de produção de cada funcionário. Alguém pode me ajudar? Estou usando Angular versão 7. Esse é o meu componente:
export class DataBindingComponent implements OnInit {
contaProducao: number = 0;
quantidadeProcesso: number[];
gaugeType = "semi";
gaugeValue = this.contaProducao;
gaugeLabel = "Speed";
gaugeAppendText = "km/hr";
thresholdConfig = {
'0': {color: 'green'},
'40': {color: 'orange'},
'75.5': {color: 'red'}
};
funcionario: Model[] = [];
novoFuncionario: Model;
novoFuncionario1: Model;
novaProducao: Producao;
novaProducao1: Producao;
novaProducao2: Producao;
novaProducao3: Producao;
novaProducao4: Producao;
producaoTotal: Producao[];
criaElemento(){
this.novoFuncionario = new Model();
this.novoFuncionario.id = 1
this.novoFuncionario.matricula ="123456"
this.novoFuncionario.nome= "a"
this.novoFuncionario.uorNome = "cenop"
this.novoFuncionario.producao = [this.novaProducao, this.novaProducao1]
this.novoFuncionario1 = new Model();
this.novoFuncionario1.id = 2
this.novoFuncionario1.matricula = "555"
this.novoFuncionario1.nome = "b"
this.novoFuncionario1.uorNome = "cenop"
this.novoFuncionario1.producao = [this.novaProducao2, this.novaProducao3, this.novaProducao4]
console.log(this.novoFuncionario);
console.log(this.novoFuncionario1);
}
criaProducao(){
this.novaProducao = new Producao();
this.novaProducao.id = 1
this.novaProducao.matricula = "123456";
this.novaProducao.meta = "18";
this.novaProducao.nome = "a";
this.novaProducao.quantidade = 2
this.novaProducao1 = new Producao();
this.novaProducao1.id = 2
this.novaProducao1.matricula = "123456";
this.novaProducao1.meta = "20";
this.novaProducao1.nome = "a";
this.novaProducao1.quantidade = 3
this.novaProducao2 = new Producao();
this.novaProducao2.id = 3
this.novaProducao2.matricula = "555";
this.novaProducao2.meta = "10";
this.novaProducao2.nome = "b";
this.novaProducao2.quantidade = 8
this.novaProducao3 = new Producao();
this.novaProducao3.id = 4
this.novaProducao3.matricula = "555";
this.novaProducao3.meta = "8";
this.novaProducao3.nome = "b";
this.novaProducao3.quantidade = 12
this.novaProducao4 = new Producao();
this.novaProducao4.id = 5
this.novaProducao4.matricula = "555";
this.novaProducao4.meta = "8";
this.novaProducao4.nome = "b";
this.novaProducao4.quantidade = 12
console.log(this.novaProducao);
console.log(this.novaProducao1);
console.log(this.novaProducao2);
console.log(this.novaProducao3);
}
adicionaElemento(){
this.funcionario.push(this.novoFuncionario, this.novoFuncionario1);
console.log(this.funcionario);
this.producaoTotal.push(this.novaProducao, this.novaProducao1, this.novaProducao2, this.novaProducao3, this.novaProducao4)
}
//funcionarioVez : Model;
percorreProducao(funcionario: Model){
this.contaProducao = this.producaoTotal.filter(f => f.matricula == funcionario.matricula).length;
}
constructor() { }
ngOnInit() {
this.criaElemento();
this.criaProducao();
this.adicionaElemento();
this.percorreProducao;
this.contaProducao = 0;
console.log(this.contaProducao)
//console.log(this.quantidadeProcesso)
}
Meu HTML:
<div class="container">
<div class="row">
<div class="col" *ngFor="let funcionario of funcionario">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Funcionario</h5>
<p class="card-text">{{ funcionario.id }}</p>
<p class="card-text">{{ funcionario.nome }}</p>
<p class="card-text">{{ funcionario.uorNome }}</p>
<p class="card-text">{{ funcionario.matricula }}</p>
<p class="card-text">{{ percorreProducao}}</p>
<p class="card-text">{{ contaProducao }}</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
<ngx-gauge [type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel"
[append]="gaugeAppendText">
</ngx-gauge>
<ngx-gauge [thresholds]="thresholdConfig"></ngx-gauge>
</div>
</div>
</div>
</div>
</div>
Model:
export class Model {
id:number;
matricula: string;
nome: string;
uorNome: string;
producao: Producao[];
}
export class Producao{
id: number;
matricula: string;
nome: string;
quantidade: number;
meta: string;
}
O console não apresenta erro.