Iteration of array elements in Typescript - Angular 7

Question

I am trying to pass the amount of elements of an array to a Typescript variable that will feed the value property of a Gauge(speedometer). I tested to put the call of the method that would do this element count in html for when it traversed each employee, passed the employee instead as parameter and returned array.lenght, but in the console does not print the value of the attribute that would receive the array size (the variable counting production). I need to get the size of each employee’s production array. Can anyone help me? I’m using Angular version 7. This is my component:

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

My 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;
}

Console shows no error.

Answer 1

You stated gaugeValue component with the initial value of this.contaProducao, which at the time of construction is 0, however you never update this gaugeValue

Also, just writing the function name in HTML will not call it to your employee.

Instead, you can pass the calls directly in HTML:

<!-- <p class="card-text">{{ percorreProducao}}</p> -->
<ng-container *ngIf="producaoTotal.filter(f.matricula === funcionario.matricula).length; let producoesCount">
<!-- Este ng-container permite reusarmos o calculo do producaoTotal
     Idealmente, você deveria criar um pipe para otimizar isso -->
    <p class="card-text">{{ producoesCount }}</p>
    <p class="card-text">{{ contaProducao }}</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
    <!-- Note o producoesCount aqui no gauge -->
    <ngx-gauge [type]="gaugeType" 
          [value]="producoesCount" 
          [label]="gaugeLabel"  
          [append]="gaugeAppendText">
    </ngx-gauge>
    <ngx-gauge [thresholds]="thresholdConfig"></ngx-gauge>
</ng-container>

Its function percorreProducao can also be removed.

Answer 2

I believe that a practical and easy way to iterate is using framework.

Try to iterate using https://lodash.com/docs#foreach

is a very easy framework to implement and use. On the site there are several examples.

_.foreach([1, 2], Function(value) { console.log(value); });